One might easily guess that there are at least two images at work when using a mouse over image.
Combine the two images with some HTML and JavaScript and voila!
Now before you panic and runaway thinking this is too difficult for you... Look at all of the code for the image above:
<a href="http://takesomecode.blogspot.com" target="_blank">
<img src='http://www.navsounds.com/blogimages/footerflat.png' alt="Take Some Code"
style="border: 0px; width: 900px; height: 100px;"
onmouseover="this.src='http://www.navsounds.com/blogimages/footerof.png';"
onmouseout="this.src='http://www.navsounds.com/blogimages/footerflat.png';" />
</a>
Let's break it down.
First of all, any spaces or line breaks tend to be ignored in HTML with only a few exceptions, and I have indented the code only to make it easier to read and understand.
I'm going to skip over the basics of the <img> tag because I already covered it in my last post here.
In that post I talked about various attributes that you can give to an <img> tag. Two more attributes you can use are the:
onmouseover="this.src='http://www.navsounds.com/blogimages/footerof.png';"
&
onmouseout="this.src='http://www.navsounds.com/blogimages/footerflat.png';"
These attributes allow you to use some inline JavaScript for an <img> tag. And in this case the only thing that we want to have happen when the user moves their mouse over the image is to change the image.
Step by Step Guide:
1) You'll need two images for it to work and they'll need to be the exact same size otherwise it could look awful... Another tip is that you'll want the images to be similar except for a change in color of something in the image just like I changed the font color for my images. You can always experiment to find a suitable change.
2) Next you'll need to upload the two images to somewhere online that way they have a source.
It is best to have a naming scheme for your images that you can understand easily so as not to confuse yourself. In my example I have footerflat.png as the original image and footerof.png for the mouse over image. footerof.png to me means footeroverflat.png and it is the naming scheme that I use frequently and it works for me.
3) Next is the code itself.
onmouseover="" is HTML and in between the quotes you are inserting JavaScript. The JavaScript used for this is " this.src='whatever your source is'; " HTML is rather forgiving if you happen to make a typo or not follow proper etiquette as I mentioned in my last post. However JavaScript is less forgiving and often needs to be exactly correct. When ending a line of code in JavaScript you end it with the " ; " semi-colon character.
"this" in JavaScript is referring to the HTML element that it is typed into and in this case the image.
"src" stands for source and is the location of your image.
In JavaScript you can change attributes of an image by first specifying the image(this) and then what attribute to change after a "."
this . src
Be sure to format the code correctly like this:
"this.source='(use single quotes inside of the double quotes to prevent the code thinking that you are done)' ; "
Put it all together and eliminated the extra spaces:
onmouseover="this.src='imagelocation';"
4) Now your image will change when the user mouses over the image, but to make sure it changes back to the original image when the mouse leaves you need to tell it to do that with this code:
onmouseout="this.src='imagelocation';"
5) Put it all inside your first <img> tag.
6) Place all of the code where you want the images to show up on the page.
7) Done.
Here is some easy code to use for yourself:
<a href="PLACE YOUR LINK ADDRESS HERE" target="_blank">
<img src='FIRST IMAGE LOCATION' alt="IMAGENAME"
style="border: 0px; width: WHATWIDTHpx; height: WHATHEIGHTpx;"
onmouseover="this.src='SECOND IMAGE LOCATION';"
onmouseout="this.src='FIRST IMAGE LOCATION" /></a>
Thanks for reading!
Enjoy the code!
As always please leave a comment if you have any questions or requests for code!
-Mike @ Take Some Code
No comments:
Post a Comment