Mouse-over image Question

windows

Guest
Ok well im gonna explain my situation.. im using a free hosting site<br />
<!-- w --><a class="postlink" href="http://www.freewebs.com">www.freewebs.com</a><!-- w --> to host my site.. now im using their tools so the HTML is a little childish... i am trying to use mouseover images on my website to reduce space and to reduce the overall confusion in my site... right now i have about 7 animated images on my page because i do Alterations for an online game... so i am hoping to reduce this problem by using still images and they can mouseover to get them to become animated... ive done this before but i havent worked on websites in a few years and since i deleted my old webpage i no longer have the script for it... im mediocre with HTML so the generator just confuses me and i would like some help... so if anyone would be so kind as to help me that would be great... thanks in advance...<br />
<br />
-Grodark<br />
<br />
if you would like to visit the website to get an understanding of what im talking about the URL is <!-- m --><a class="postlink" href="http://www.freewebs.com/grodark">http://www.freewebs.com/grodark</a><!-- m --><br />
<br />
I'm going to go to the generator and copy and paste what the exact text says and maybe someone can explain it to me.. so i get a better grasp<br />
<br />
<!-- TWO STEPS TO INSTALL PRELOAD IMAGES:<br />
<br />
1. Paste the first into the HEAD of your HTML document<br />
2. Add the last code into the BODY of your HTML document --><br />
<br />
<!-- STEP ONE: Copy this code into the HEAD of your HTML document --><br />
<br />
<HEAD><br />
<br />
<SCRIPT LANGUAGE="JavaScript"><br />
<br />
<!-- This script and many more are available free online at --><br />
<!-- The JavaScript Source!! <!-- m --><a class="postlink" href="http://javascript.internet.com">http://javascript.internet.com</a><!-- m --> --><br />
<br />
<!-- Begin<br />
<br />
image1 = new Image();<br />
image1.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a><!-- m -->"http://www.FakeImage.com/Fake2.gif";<br />
<br />
// End --><br />
</script><br />
</HEAD><br />
<br />
<!-- STEP TWO: Insert this code into the BODY of your HTML document --><br />
<br />
<BODY><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Http://www.fakeimage.com" onmouseover="image1.src='http://www.FakeImage.com/Fake2.gif';"<br />
onmouseout="image1.src='http://www.FakeImage.com/Fake1.gif';"><br />
<img name="image1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.FakeImage.com/Fake1.gif" border=0></a><br />
<br />
</BODY><!--content-->instead of:<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Http://www.fakeimage.com" onmouseover="image1.src='http://www.FakeImage.com/Fake2.gif';"<br />
onmouseout="image1.src='http://www.FakeImage.com/Fake1.gif';"><br />
<img name="image1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.FakeImage.com/Fake1.gif" border=0></a><br />
<br />
try:<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.fakeimage.com" onmouseover="document.image1.src='http://www.FakeImage.com/Fake2.gif';" onmouseout="document.image1.src='http://www.FakeImage.com/Fake1.gif';"><br />
<img name="image1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.FakeImage.com/Fake1.gif" border=0></a><!--content-->That code can be made a whole lot simpler by doing this:<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.gif" alt="All images should have some meaningful alternate text here." width="100" height="100" onmouseover="this.src='image2.gif';" onmouseout="this.src='http://www.webdeveloper.com/forum/archive/index.php/image1.gif';">As you can see, the image does not need to be in a link to do this, but you can put it in a link if you so wish.<!--content-->
 
Back
Top