flash swf in the background
► restart

simple hover image change


 
The easy way to do an imagechange anchor. At least the code could be interesting, check this. The style class for the barcode is put into this page-source code, so that must not be to hard to copy.  
 
 
 
 
 


§ how to do it

It is about 2 images contained in one division, that change by hovering on it. In this case it is ‘png’s’ with a mask, but it could be any 2 images. Here is the code and you have to change images, sizes, ways of positioning, etc.
Each item is necessary either for Safari, Firefox or Internet Explorer, which makes this post rather unique. You cannot miss any or it will not properly function; like some flickering effect or malfunctioning link. It took me a lot to find it out. Even the strange division within a table is necessary here for positioning, but mostly can be left out. Yet I am only a beginner so please do not ask me when things go wrong. Anyway, it does the job in 3 main browsers:

< style type="text/css">

div.barcode { height: 70px; width: 195px; position: absolute; left: 50%; margin-left: -90px; top: 50%; margin-top: -50px; padding:0; background-image:
url("images/barcodeRed.png"); }

div.barcode a, div.barcode a:link, div.barcode a:visited { display:block; background : none; }

div.barcode img { width:100%; height:100%; border:0; }

div.barcode a:hover img { visibility:hidden; background : none; }

< /style>

< /head>
< body>

< table class=""> < tr> < td> < div class="barcode">
< a href="http://www.peterthijs.nl/books">
< img src="images/barcodeBlack.png" width="195" height="70" alt="don’t forget" /> < /a> < /div> < /td> < /tr> < /table>

 
So, there are two images in one division, that show the effect you want. The anchor-image source is on top and hides on hovering. The background-image then will show. That is all. Other methods are repositioning the background image in order to change view. Also nice, but not in this post explained. You have to explore other sites.

§ Leave a Reply

If you think this was helpful then why don’t you leave a reply? If you don't see your comment right away, it means we've turned on moderation to fight the evil spammers. It'll show up soon

Logged in as admin. Log out »