The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Button, on click, hover image over webpage

The forum of the forums :: Miscellaneous :: Garbage

Go down

Button, on click, hover image over webpage Empty Button, on click, hover image over webpage

Post by villageexample March 7th 2012, 2:05 pm

Hi, I am currently trying to create a button that once you click it, it will show an image but that image will hover over the webpage.

E.g. The code im using currently will show the image when you hover over the thumbnail

Code:
<a class="thumbnail" href="#thumb"><img src="http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/format-font-size-less.png" /><span><img src="http://img196.imageshack.us/img196/4213/increasedescrease.png" /><br /></span></a>

How do i make this into a button that once clicked it will hover the image I want?
villageexample
villageexample
Forumember

Male Posts : 32
Reputation : 1
Language : english

Back to top Go down

Button, on click, hover image over webpage Empty Re: Button, on click, hover image over webpage

Post by Guest March 7th 2012, 2:33 pm

Hi!

You can use onclick attribute, like:
Code:
<a class="thumbnail" href="#thumb" onClick="..."><img src="http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/format-font-size-less.png" /><span><img src="http://img196.imageshack.us/img196/4213/increasedescrease.png" /></span></a><br />
http://www.w3schools.com/jsref/event_onclick.asp
avatar
Guest
Guest


Back to top Go down

Button, on click, hover image over webpage Empty Re: Button, on click, hover image over webpage

Post by villageexample March 8th 2012, 1:53 am

Ok so far i have what i wanted, however i want the image to hover over the forum, im using the following css code to allow me to hover:
Code:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

But when i click on my thumbnail/button it pushes everything to the side rather than just showing it hovering above the rest of the forum.
It works when i dont use it as a clickable event but id rather have it so it hovers when it is clicked.
This is the code i have which currently pushes all the forum around the image when the button is clicked:
(Where have i gone wrong? :S)

Code:
<head>
    <script type="text/javascript">
    function showImage(){
        document.getElementById('Font').style.visibility='visible';
    }
    </script>
    </head>
<body>
    <a class="thumbnail" href="#thumb" onClick="showImage();"/><img src="http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/format-font-size-less.png" />
    <img id="Font" src="http://img196.imageshack.us/img196/4213/increasedescrease.png" style="visibility:hidden"/>
</body>

Also is it possible to create an event that when the image and or the button is clicked again it will hide the image again?

EDIT:
I have just noticed that on this forum, when you click "Search" at the top of the page, in the navbar sort of fields, it does exactly what I want my button to do, anyone know how this is done?
villageexample
villageexample
Forumember

Male Posts : 32
Reputation : 1
Language : english

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum