PDA

View Full Version : image rollovers



glc1
01-24-02, 04:34 PM
I need help with image rollovers (swapping images). I would like to have them compatible with both NS and IE. I have a 5 images that I want changed when the mouse is pushed over them.

TIA>

Norm
01-24-02, 05:39 PM
I haven't got a clue....
I did a search with "picture rollover in web page" and came up with a few links to post, there were more but these should suffice to give you an idea of how it's done. Check out the source code in the pages that use this effect. There was 1 or 2 pages that will write the script for you.

http://www.idocs.com/tags/images/images_famsupp_59.html

http://www.opotiki2.co.nz/downloads/rollover.htm

http://post.uwstout.edu/i/Imholtea/instructpf2.htm

http://www.efuse.com/clinic/mouseover/html/page_2.html

http://www.javapie.com/java/rollover.html

http://www.willmaster.com/possibilities/demo/doublerollover.shtml

http://www.efuse.com/clinic/mouseover/

IHateExcite
01-24-02, 08:30 PM
Well I'm guessing that you want to use an image for a link and have different mouse-up and mouse-down pics? If that's what you want then you can do it pretty easily with something like this. You can also use any of the other intrinsic events like OnMouseMove, OnMouseDown, etc. In the example below, when the mouse is over the pic the OnMouseOver event is triggered and the value of the src property of that image (which we can reference by its name) changes, and likewise when the mouse moves out the pic changes back.

<a href="url.htm" onMouseOver="document.ImageName.src=MouseOverPic.gif'"
onMouseOut="document.ImageName.src='NormalPic.gif'">
<img src="NormalPic.jpg" name="ImageName"></a>

Hope that helps.

glc1
01-25-02, 12:42 AM
Originally posted by IHateExcite
Well I'm guessing that you want to use an image for a link and have different mouse-up and mouse-down pics? If that's what you want then you can do it pretty easily with something like this. You can also use any of the other intrinsic events like OnMouseMove, OnMouseDown, etc. In the example below, when the mouse is over the pic the OnMouseOver event is triggered and the value of the src property of that image (which we can reference by its name) changes, and likewise when the mouse moves out the pic changes back.

<a href="url.htm" onMouseOver="document.ImageName.src=MouseOverPic.gif'"
onMouseOut="document.ImageName.src='NormalPic.gif'">
<img src="NormalPic.jpg" name="ImageName"></a>

Hope that helps. OK, I did all of that but the image doesn't switch.

Thanks for your help...

IHateExcite
01-25-02, 09:44 AM
glc1,
I've got no idea why that isn't working for you. Granted I typed that out on the fly when I replied so just to make sure I copied that into a blank text doc, renamed some stuff in the source, renamed the file from .txt to .htm and it worked. The only thing that I can think of that maybe you might have missed is that the image names in the "document.blah.src=" part have to be surrounded by single quotes INSIDE the double quotes of the rest of that statement. Oh shoot...dammit......looks like the MouseOverPic.gif didn't have a single quote in front of it.

Try putting a single quote in front of the:

onMouseOver="document.ImageName.src=MouseOverPic.gif'"

so it looks like this:

onMouseOver="document.ImageName.src='MouseOverPic.gif'"


Sorry about that.

glc1
01-25-02, 10:31 AM
Originally posted by IHateExcite
glc1,
I've got no idea why that isn't working for you. Granted I typed that out on the fly when I replied so just to make sure I copied that into a blank text doc, renamed some stuff in the source, renamed the file from .txt to .htm and it worked. The only thing that I can think of that maybe you might have missed is that the image names in the "document.blah.src=" part have to be surrounded by single quotes INSIDE the double quotes of the rest of that statement. Oh shoot...dammit......looks like the MouseOverPic.gif didn't have a single quote in front of it.

Try putting a single quote in front of the:

onMouseOver="document.ImageName.src=MouseOverPic.gif'"

so it looks like this:

onMouseOver="document.ImageName.src='MouseOverPic.gif'"


Sorry about that. OK, the swapping now occurs, however, it only works when this technique is used on one image. If I insert two images, the swapping stops.

IHateExcite
01-26-02, 10:39 AM
Don't forget to change the value of the name property for each different image.

glc1
01-26-02, 04:05 PM
Originally posted by IHateExcite
Don't forget to change the value of the name property for each different image. Tried that, woudln't work either. I finally got it working w/ Macromedia's Dreamweaver. Thanks...

BTW, why do you hate Excite?

IHateExcite
01-26-02, 10:57 PM
<a href="url.htm" onMouseOver="document.ImageName.src='MouseOverPic.gif'"
onMouseOut="document.ImageName.src='NormalPic.gif'">
<img src="NormalPic.jpg" name="ImageName"></a>

<a href="url2.htm" onMouseOver="document.ImageName2.src='MouseOverPic2.gif'"
onMouseOut="document.ImageName2.src='NormalPic2.gif'">
<img src="NormalPic2.jpg" name="ImageName2"></a>


That works. If you want to use dreamweaver or some other automated tool then knock yourself out. What I posted works though. If you have no interest in learning how it works by yourself then I'm sure macromedia has what you're looking for.


edit:
A couple friends of mine who mod here suggested that I check out this forum. At the time excite was changing ownership and the new owners completely ****ed up the email accounts. Since the new owners took over I haven't gotten a single new email so I couldn't complete the registration with my usual nick. Instead I reg'ed "ihateexcite" because if it weren't for them I'd be posting with my usual nick instead of this crap. Hopefully soon one of the mods (or phil) will take notice and delete the "4oh4" account so I can reg it with another email addy.

Chris
02-01-02, 12:00 PM
<HTML>

<HEAD>

<TITLE>links page</TITLE>


<script language="JavaScript">
<!-- Hide from old browsers
var NN3 = false;
image1= new Image();
image1.src ="img/1b.gif";
image1on = new Image();
image1on.src = "img/1a.gif";
image2= new Image();
image2.src = "img/1b.gif";
image2on = new Image();
image2on.src = "img/2a.gif";
image3= new Image();
image3.src = "img/1b.gif";
image3on = new Image();
image3on.src = "img/3a.gif";
image4= new Image();
image4.src ="img/1b.gif";
image4on = new Image();
image4on.src = "img/4a.gif";
image5= new Image();
image5.src = "img/1b.gif";
image5on = new Image();
image5on.src = "img/5a.gif";
image6= new Image();
image6.src = "img/1b.gif";
image6on = new Image();
image6on.src = "img/6a.gif";
image7= new Image();
image7.src ="img/1b.gif";
image7on = new Image();
image7on.src = "img/7a.gif";
image8= new Image();
image8.src = "img/1b.gif";
image8on = new Image();
image8on.src = "img/8a.gif";

function on3(name) {
document[name].src = eval(name + "on.src");
}
function off3(name) {
document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name) {
if (NN3) on3(name);
}
function off(name) {
if (NN3) off3(name);
}
// -->
</script>

</HEAD>
<BODY background="img/grid.gif">
<script language="JavaScript">

<!-- Begin

var months=new Array(13);

months[1]="January";

months[2]="February";

months[3]="March";

months[4]="April";

months[5]="May";

months[6]="June";

months[7]="July";

months[8]="August";

months[9]="September";

months[10]="October";

months[11]="November";

months[12]="December";

var time=new Date();

var lmonth=months[time.getMonth() + 1];

var date=time.getDate();

var year=time.getYear();

if(navigator.appName == "Microsoft Internet Explorer")
{
year = year;
}
else
{
year = year + 1900;
}
document.write("<center>" + lmonth + " ");

document.write(date + ", " + year + "</center>");

// End -->

</script>
<CENTER><Img Src="img/mwds.gif" width="90%"><BR><BR>


<a href="dir.html"target="parent" onmouseover="on('image2');" onmouseout="off('image2')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image2" ALT="Logos"></a><br>
<a href="etcha.html"target="parent" onmouseover="on('image3');" onmouseout="off('image3')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image3" ALT="Flash Movies"></a><br>
<a href="http://www.bmts.com/~taunton/index1.html"target="parent" onmouseover="on('image4');" onmouseout="off('image4')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image4" ALT="Other Sites"></a><br>
<a href="liv.html"target="parent" onmouseover="on('image5');" onmouseout="off('image5')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image5" ALT="Pano"></a><br>
<a href="price.html"target="parent" onmouseover="on('image6');" onmouseout="off('image6')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image6" ALT="Prices"></a><br>
<a href="links.html"target="parent" onmouseover="on('image1');" onmouseout="off('image1')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image1" ALT="HTML Resources"></a><br>
<a href="formmail.html"target="parent" onmouseover="on('image7');" onmouseout="off('image7')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image7" ALT="Mail"></a><br>
<a href="main.html"target="parent" onmouseover="on('image8');" onmouseout="off('image8')">
<img src="img/1b.gif" width="90%" height="8%" border="0" name="image8" ALT="Home"></a><br>



</CENTER>
</BODY>

</HTML>


Can be seen here in action (http://www.bmts.com/~taunton/)

IHateExcite
02-01-02, 06:06 PM
That certainly is another way of doing it, but why would you want to type all of that?

For your 8 links/rollovers you have to type 3 pages. For the same 8 rollovers, it could be done using my method in about 16 lines of typing. Granted about 1 of your pages was to write the date, but still....

-shrugs- though..... I guess as long as it works there's not really any one right way to do it. It's all up to personal preference. It sounds like he's decided to use a wysiwyg editor so it doesn't really matter either way I suppose.