rollover effects

unobtrusive javascript

Page 1 of 1

2 Replies - 1080 Views - Last Post: 05 November 2009 - 02:37 AM

#1 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

rollover effects

Posted 04 November 2009 - 11:07 AM

hi

I'm working my way through a book and the example i'm on is proving to be a bit in-penetrable. Ok, I know there are other simpler ways to achieve the same thing, but this example sets a whole chapter up and so i must do it this way. The code is:

<script type="text/javascript">
/**
* Example 22-1 Adding a rollover effect to an image
*
*
* Add a rollover effect to the specified image, by adding event
* handlers to switch the image to the specified URL while the 
* mouse is over the image. 
*
* If the image is specified as a string, search for an image with that
* string as its id or name attribute.
*
* This method sets the onmouseover and onmouseout event-handler properties
* of the specified image, overwriting and discarding any handlers previously
* set on those properties.
*
*/
function addRollover(img, rolloverURL) {
	if(typeof img=="string") { //If img is a string,
		var id = img;			//it is an id, not an image
		img = null;				//and we don't have an image yet.
		
		//first try looking the image up by id
		if(document.getElementByID) img = document.getElementByID(id);
		else if (document.all) img = document.all[id];
		
		//if not found by id, try looking the image up by name.
		if (!img) img = document.images[id];
		
		//If we couldn't find the image, do nothing and fail silently.
		if(!img) return;
	}
//if we found an element but it is not an <img> tag, we also fail
if(img.tagName.toLowerCase() != "img") return;

//remember the original URL of the image
var baseURL = img.src;

//Preload the rollover image into the browsers cache
(new Image()).src = rolloverURL;

img.onmouseover = function() {img.src = rolloverURL;}
img.onmouseout = function() {img.src = baseURL;}

}

</script>
</head>
<body>

<!-- purley an example

baseURL = images/pirates.jpg
rolloverURL = images/compass.jpg
-->

<img src="images/pirates.jpg" id="MyImg" />

</body>
</html>




The book is 3 years old.

Questions:

After some research I'm thinking (document.all) img = document.all[id]; is deprecated so i can eliminate this and also if (!img) img = document.images[id]; ?

so now my code is:

function addRollover(img, rolloverURL) {
	if(typeof img=="string") { //If img is a string,
		var id = img;			//it is an id, not an image
		img = null;				//and we don't have an image yet.
		
		//first try looking the image up by id
		img = document.getElementByID(id);
		
		//If we couldn't find the image, do nothing and fail silently.
		if(!img) return;
	}
//if we found an element but it is not an <img> tag, we also fail
if(img.tagName.toLowerCase() != "img") return;

//remember the original URL of the image
var baseURL = img.src;

//Preload the rollover image into the browsers cache
(new Image()).src = rolloverURL;

img.onmouseover = function() {img.src = rolloverURL;}
img.onmouseout = function() {img.src = baseURL;}

}




Before I go any further, is this ok? :)

Is This A Good Question/Topic? 0
  • +

Replies To: rollover effects

#2 Gorian  Icon User is offline

  • ninja DIC
  • member icon

Reputation: 120
  • View blog
  • Posts: 1,681
  • Joined: 28-June 08

Re: rollover effects

Posted 04 November 2009 - 08:02 PM

You have to do it this way? you could achieve an image rollover with the following:

<img name="my image" src="\images\image1.jpg" onmouseover="java script:this.src='\images\image2.jpg'" onmouseout="java script:this.src='\images\image1.jpg'">



Note that javascript is without the spaces

This post has been edited by Gorian: 04 November 2009 - 08:03 PM

Was This Post Helpful? 0
  • +
  • -

#3 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

Re: rollover effects

Posted 05 November 2009 - 02:37 AM

View PostGorian, on 4 Nov, 2009 - 07:02 PM, said:

You have to do it this way? you could achieve an image rollover with the following:

Hi Gorian, yes, like I said, I have to do it this way. The reason is the method you show is obtrusive, and i'm trying to achieve unobtrusive javascript. :) The method sets up a chapter and so other, similar ways are irrelevant in this case.

I have more questions, like, (how do i invoke the function?), (what is the function actually checking initially?), but my first questiong is at post #1. :) It sounds like i'm overcomplicating things i know, but trust me.... :)

This post has been edited by 1cookie: 05 November 2009 - 02:37 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1