# Javascript Image Rollover help (bad web design teacher)



## Adrian. (Nov 28, 2007)

I'm back again. 

I followed the instructions word by word and came up with this. 


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<html>
<head>

<script language="Javascript"><!--
//Slide Show script if (document.images) {
button1 = new Image button2 = new Image button1.src = 'img1.gif' button2.src = 'img2.gif'
} </script>



</head>
<body>

<a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src"
onmouseout="document.rollover.src=button1.src"><img src="img1.gif" border=0 name="rollover"></a>

</body>
</html>
```
I get this: http://ricci.glendon.yorku.ca/camara/javascript/

I have 2 .gif images stored in a folder named "rollover". 

Any ideas.


----------



## CanadaRAM (Jul 24, 2005)

Adrian. said:


> I'm back again.
> 
> I followed the instructions word by word and came up with this.
> 
> ...


Well for starters your code references the images at the root, not in the rollover folder 

img1.gif 

is not the same as 

/rollover/img1.gif

make sure your path in the code matches the actual path.

As for the JS, I don't know. Do you have an example you are working from?


----------



## Adrian. (Nov 28, 2007)

Thanks CR. That didn't do it though.


----------



## CanadaRAM (Jul 24, 2005)

Adrian. said:


> Thanks CR. That didn't do it though.


You still didn't change 
<img src="img1.gif" border=0 name="rollover"></a>
to
<img src="/rollover/img1.gif" border=0 name="rollover"></a>


----------



## Adrian. (Nov 28, 2007)

CanadaRAM said:


> You still didn't change
> <img src="img1.gif" border=0 name="rollover"></a>
> to
> <img src="/rollover/img1.gif" border=0 name="rollover"></a>


nada...

ugh. This teacher is profoundly frustrating.


----------



## Nick (Aug 24, 2002)

There were a few problems going on there.

Use this instead. You need to make sure "nav_abc" in the onmouseover & onmouseout match the id in the image. Also each image id needs to be unique.



```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
</head>
<body>
	<div id="name">
		<a href="#" onmouseover="document.nav_abc.src='/images/nav_abc_f2.gif';" onmouseout="document.nav_abc.src='/images/nav_abc.gif';"><img src="/images/nav_abc.gif" id="nav_abc" border="0" alt="" /></a>	
		<a href="#" onmouseover="document.nav_xyz.src='/images/nav_xyz_f2.gif';" onmouseout="document.nav_xyz.src='/images/nav_xyz.gif';"><img src="/images/nav_xyz.gif" id="nav_xyz" border="0" alt="" /></a>
	</div>
</body>
</html>
```


----------



## groovetube (Jan 2, 2003)

one major problem I see right off, is you start your if statement in the script on the same line as the comment, rendering that line useless, and a syntax error.


```
<script language="Javascript"><!--
//Slide Show script if (document.images) {
button1 = new Image button2 = new Image button1.src = '/rollover/img1.gif' button2.src = '/rollover/img2.gif'
} </script>
```
should be:


```
<script language="Javascript"><!--
//Slide Show script -don't place any code here or it will be commented out!!!--
 if (document.images) {
    button1 = new Image button2 = new Image button1.src = '/rollover/img1.gif'     button2.src = '/rollover/img2.gif'
} </script>
```
and the script is totally wrong. I haven't time to look quite yet.


----------



## Nick (Aug 24, 2002)

Just re-read the thread. In your case here is the exact code you need, but my above post is a good template for you to use going forward:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
</head>
<body>
	<div id="name">
		<a href="#" onmouseover="document.funnyface.src='rollover/img2.gif';" onmouseout="document.funnyface.src='rollover/img1.gif';"><img src="rollover/img1.gif" id="funnyface" border="0" alt="" /></a>	
	</div>
</body>
</html>
```


----------



## Adrian. (Nov 28, 2007)

Nick said:


> Just re-read the thread. In your case here is the exact code you need, but my above post is a good template for you to use going forward:
> 
> ```
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> ...


That got the image up, but the rollover doesn 't work. For the life of me I cannot figure it out.

site here


----------



## groovetube (Jan 2, 2003)

Adrian. said:


> That got the image up, but the rollover doesn 't work. For the life of me I cannot figure it out.
> 
> site here


try setting the name property in the img tag to funnyface, not the id.

ie name="funnyface"

here:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
</head>
<body>
	<div id="name">
		<a href="#" onmouseover="document.funnyface.src='rollover/img2.gif';" onmouseout="document.funnyface.src='rollover/img1.gif';"><img src="rollover/img1.gif" name="funnyface" border="0" alt="" /></a>	
	</div>
</body>
</html>
```


----------



## Guest (Mar 23, 2011)

I was just gonna comment on that ...

document.funnyface.src is not accessing img id="funnyface"

I'm not sure that accessing anything in DOM by that approach is 100% correct, might not work on all browsers with all doctypes. I may be wrong on that but it rings a bell somewhere in the cobwebs of my brain. I've been using jquery so much lately that all other selectors have been put way back on the backshelf


----------



## Adrian. (Nov 28, 2007)

groovetube said:


> try setting the name property in the img tag to funnyface, not the id.
> 
> ie name="funnyface"
> 
> ...


SUCCCESSSSSS!!!!!!!!!!! THANK YOU EVERYONE!!!!

You have been much better teachers than the one I am currently paying for!


----------



## Nick (Aug 24, 2002)

Oops. my bad. Didn't test.
Just tested locally and it works with gecko but not webkit.

Funny as using name over id has been depreciated in xhtml. 
When using name with strict it won't validate, but it works with webkit
When using id with strict it will validate, but still doesn't work with webkit.
Hmm.


----------



## groovetube (Jan 2, 2003)

I know I'll take flack for it, but often validation isn't the be all. Your page won't validate with that little png fix for ie6 either.


----------



## Nick (Aug 24, 2002)

groovetube said:


> I know I'll take flack for it, but often validation isn't the be all. Your page won't validate with that little png fix for ie6 either.


I know, there are times when I don't care if the page validates. But I do try.
As for the png fix. I stopped supporting ie6 two years ago.


----------



## groovetube (Jan 2, 2003)

I still run it anyway, to see where things are at, sometimes you get a clean bill of health.

ie6, some clients, still insist. I'm waiting for the day which will be very soon, to install it as policy, no ie6, period.


----------



## Guest (Mar 23, 2011)

I officially stopped supporting IE6, yay!  There comes a time when you just have to pull the plug on things. It's now almost 10 years old so I don't feel bad about telling clients that I won't support it. When I point out it's age to them most agree with me.

For valid XHTML to reference things in DOM like that you should use id as opposed to name, but to access them via javascript you need to use getElementById('id of node'). In that example it would have been possible to also use "this" and childNodes[] or children[].

... or ... what all the cool kids do these days ... just use jQuery which has amazing selectors available. I'm a total jQuery convert. Don't know how I went so long without using it, doing things the hard way.


----------



## macpablodesigns (Jun 11, 2010)

Do what I do and charge for writing the extra code fixes for ie6.


----------



## groovetube (Jan 2, 2003)

mguertin said:


> I officially stopped supporting IE6, yay!  There comes a time when you just have to pull the plug on things. It's now almost 10 years old so I don't feel bad about telling clients that I won't support it. When I point out it's age to them most agree with me.
> 
> For valid XHTML to reference things in DOM like that you should use id as opposed to name, but to access them via javascript you need to use getElementById('id of node'). In that example it would have been possible to also use "this" and childNodes[] or children[].
> 
> ... or ... what all the cool kids do these days ... just use jQuery which has amazing selectors available. I'm a total jQuery convert. Don't know how I went so long without using it, doing things the hard way.


totally agree, jquery is where it's at.

I added the superfish method of dropdown menus inside one of my custom wordpress themes manually, it's great.


----------



## Nick (Aug 24, 2002)

Yup, love jquery. 
As for the mouseovers, I don't even do them that way anymore.
Typically I do them all via css and will use one file for all the nav.


----------



## MacMagicianJunior (Nov 28, 2010)

Nick said:


> Yup, love jquery.
> As for the mouseovers, I don't even do them that way anymore.
> Typically I do them all via css and will use one file for all the nav.


Same here, oh and id's seem to work in webkit if you reference the images object in the DOM event handlers, in this case document.images.funnyface.src etc... I'd been plying with it last night but by the time I solved the problem Adrian had already been successful, rendering the solution moot.


----------



## Guest (Mar 24, 2011)

MacMagicianJunior said:


> Same here, oh and id's seem to work in webkit if you reference the images object in the DOM event handlers, in this case document.images.funnyface.src etc... I'd been plying with it last night but by the time I solved the problem Adrian had already been successful, rendering the solution moot.


The problem is with that approach you can run into issues with IE :/ The absolute safest ways are either by id with getElementById or using the "this" selector, which should work in pretty much any modern browser. The site I linked to , quirksmode.org is a fantastic resource for js.


----------



## MacMagicianJunior (Nov 28, 2010)

mguertin said:


> The problem is with that approach you can run into issues with IE :/ The absolute safest ways are either by id with getElementById or using the "this" selector, which should work in pretty much any modern browser. The site I linked to , quirksmode.org is a fantastic resource for js.


Too true, and both methods I would be likely to use instead of this... although like Nick I use css for rollovers on my own sites, I pictured this more as an exercise...


----------



## Izzy (Apr 14, 2008)

groovetube said:


> ie6, some clients, still insist. I'm waiting for the day which will be very soon, to install it as policy, no ie6, period.


It looks like Microsoft feels the same way. 

Internet Explorer 6 Countdown


----------



## groovetube (Jan 2, 2003)

Izzy said:


> It looks like Microsoft feels the same way.
> 
> Internet Explorer 6 Countdown


certainly, and their remedy is to download their latest piece of crap.

Someone should hack that site to show a download link to firefox and chrome.

Just kidding, sorta, about the hack part should big brother be watching...


----------



## Izzy (Apr 14, 2008)

I agree. IE9 is a big disappointment.

IE9 & HTML5


----------



## macpablodesigns (Jun 11, 2010)

I was just thinking... if you are looking for some help with learning some web development things, why not check out some podcasts that are on the itunes store? just search for css3, jquery and/or html5. It could help you get some of the basics down quite quickly.


----------



## TroutMaskReplica (Feb 28, 2003)

i realize this assignment is for a class, but the better method for rollovers is to use css pseudo selectors instead.

ex.

a:link {
background: src="images/image.jpg";
}

a:hover {
background: src="images/differentImage.jpg";
}


----------

