The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Button, on click, hover image over webpage

View previous topic View next topic Go down

Button, on click, hover image over webpage

Post by villageexample on 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
Forumember

Male Posts : 32
Reputation : 1
Language : english

Back to top Go down

Re: Button, on click, hover image over webpage

Post by Guest on 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

Guest
Guest


Back to top Go down

Re: Button, on click, hover image over webpage

Post by villageexample on 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
Forumember

Male Posts : 32
Reputation : 1
Language : english

Back to top Go down

View previous topic View next topic Back to top


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