Problem with simple rollover script 1

[Foamcow]

Hi,

I'm not big on Javascript, it's kind of on the periphary of what I do but I've had need to knock up a simple rollover script for a current job.
It doesn't need to be particularly portable but I would like to easily be able to add/remove buttons without messing with the javascript. Apologies in advance for any horrible coding faux pas I've made

	window.onload=function(){
		var nav = document.getElementById('nav');
		
		var buttons = nav.getElementsByTagName('IMG');

		for(var i=0; i<buttons.length; i++){
			buttons[i].onmouseover = function(){
				var original = this.getAttribute('src');
				var original = original.split('/');
				this.setAttribute('src','images/' + 'on_' + original[1]);
			}
			
			buttons[i].onmouseout = function(){
				var original = this.getAttribute('src');
				var original = original.split('_');
				this.setAttribute('src','images/btn_' + original[2]);
			}
		}
	
	}

Now to the problem...
The script is meant to swap out a few images by altering the src attribute. More specifically changing the src from say,

btn_about.png to on_btn_about.png

This seems to work fine in Firefox and Safari but doesn't work in IE (windows).

When I rollover one of the buttons, the src changes but it just changes to "on_" rather than "on_btn_about.png"


Any ideas why?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[BillyRayPreachersSon]

Try one of the following:

- When using setAttribute, add a second parameter, 1, to the call:

el.setAttribute('attr', 1);

- Don't use get/setAttribute, read the src property directly.

Failing that, test that the second array element ([1]] actually holds what you expect - it may well be that it doesn't).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Cheers Dan,

that array element must have what i need in there or FF wouldn't work, right?

Anyway, I tested it, it looked right.

So I tried setting the src directly and it now works. yay!

Thing is, the onmouseout event still uses the DOM method and that works too! So I guess it must have been something in the way I was building the string for the new src?

Oh well, its working and its not worth spending any more time on!

Cheers

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

Despite saying I wouldn't spend more time on it I did...

I thought it might be the spaces in my original method.
So I took them out and IE worked.

Cool.

To confirm the test, I put the spaces back in, expecting it to break again.... IE still worked.

So now I have the same script that didn't work, but it works.

I'm going back to bed.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

Lord...

It would help if I tested in the right browser... was using Firefox.

My only excuse is that I was up working until 2am this morning.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[tsuji]

src may be retrieved in the form of absolute path In case of

http://...

or file://..., component[1] may be therefore empty.

 

[Foamcow]

Yep the problem was that FF, Safari etc got src as say,

images/btn_about.png

Where as IE was getting the full absolute path.


I changed the script to this...

window.onload=function(){
		var nav = document.getElementById('nav');
		
		var buttons = nav.getElementsByTagName('IMG');

		for(var i=0; i<buttons.length; i++){
			buttons[i].onmouseover = function(){
				var path = this.getAttribute('src');
				path = path.split('/');
				var filename = path[path.length -1];
				this.setAttribute('src','images/' + 'on_' + filename);
			}
			
			buttons[i].onmouseout = function(){
				var original = this.getAttribute('src');
				alert(original);
				original = original.split('_');
				this.setAttribute('src','images/btn_' + original[2]);
			}
		}
	
	}

The mouseout function still works because I am splitting on the "_" rather than on "/". So it will work so long as there are no other "_" in the pathname

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[BillyRayPreachersSon]

You could also use "lastIndexOf" to find the last "/" character.

But splitting works just as well - so it's whichever you prefer, really.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kaht]

foamcow, if you want to take the suave approach here's another solution of extracting the filename:

<script type="text/javascript">

function sexyRegExpSolution(str) {
   var returnValue = /\/([^\/]+)$/.exec(str);
   if (returnValue) {
      //this found a match and will return the first parenthesized match
      return returnValue[1];
   }
   else {
      //this means no match was found and will return null
      return returnValue;
   }
}

var fileName = "[URL unfurl="true"]http://www.whatever.com/blah/images/this_is_my_test.jpg";[/URL]
alert(sexyRegExpSolution(fileName));


var fileName2 = "images/this_is_my_test.jpg";
alert(sexyRegExpSolution(fileName2));


var fileName3 = "this will not find a match so it will return null";
alert(sexyRegExpSolution(fileName3));

</script>

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[BillyRayPreachersSon]

Bah. Regexp is for wimps. Well... that and those that know it - which just isn't me! ;-)

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kaht]

I wonder which category I fall into?

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[BillyRayPreachersSon]

I'd better not say, lest you set the terriers on me!

;-)



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Actually I considered using regexp or something and making the thing more portable so I could drop it into other sites.

Then I thought, "what's the point?"
I normally use CSS for rollovers and if I really need a fully portable JS rollover script I can just go grab one from a site made with Dreamweaver

Saying that, I much prefer to keep the HTML clean so it might be worth doing using "unobtrusive" methods. Certainly already been done before though.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

what makes a regex "sexy" ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

what makes a regex "sexy" ?

Hmm.... I'm not really sure. For some reason I always use the word "sexy" when I describe regexp......

I guess the best answer would be that it usually knocks multiple lines of code down to one line, and that is usually pretty sexy

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[1DMF]

I think you need to get our more kaht - lol

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

I have a 4 1/2 month old son (my first), so getting ou[!]t[/!] isn't really an option

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[1DMF]

congrats and all the best for the future

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

thanks

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[Foamcow]

In the quest to be ever sexier, I've used your regexp function Kaht... ta

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire