Making a 'mouseover' exchange of graphics
Sometimes you want to acknowledge the user having 'moused over' a graphic in your page. This is best done by includeing a 'brightened up version of that graphic.... the graphic then seem to 'light up' when selected. The on 'right clicking' the user can follow through to a page.
I will use an example that takes you to the Facebook page for Cyberphysics - my other site.
If you 'mouseover' the image below you will see it 'light up'. Clicking on it will take you to facebook!
The Code
| <a href="https://www.facebook.com/Cyberphysics" target="_blank"> |
Here, you set the link you wish the user to go to after right clicking on the graphic. |
| <img src="http://www.cyberphysics.co.uk/graphics/buttons/facebook.png" |
This is the image that appears on your page before the 'mouseover' |
alt="Follow on Facebook" width="45" height="45" hspace="5" border="0" align="absmiddle" |
This sets the size of the graphic and what should appear if the graphic does not upload for some reason... |
| onmouseover="this.src='http://www.cyberphysics.co.uk/graphics/buttons/facebookMO.png'" |
Here you are setting the graphic that is visible when the mouse pointer hovers over your image. |
| onmouseout="this.src='http://www.cyberphysics.co.uk/graphics/buttons/facebook.png'"/> |
And now we have the image that you want visible when your mouseover experience is finished. You could have a different image to show the user had already looked at this.... or just go back to the original one. |
| </a> |
Now we close off the hyperlink jump instruction |
