Jump to content

JS: onmouseover & className

tinfanide

By tinfanide
in JavaScript

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted 
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	thumbnails();		window.caption = document.getElementById('caption');	window.thumbnail = document.getElementById('thumbnail');			}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '500px';		document.slideImage.style.width = '500px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var cap = new Array();cap[0] = "Google";cap[1] = "Youtube";cap[2] = "Facebook";cap[3] = "GMail";var url = new Array();url[0] = "http://www.google.com/";url[1] = "http://www.youtube.com/";url[2] = "http://www.facebook.com/";url[3] = "http://www.gmail.com/";var imgNumber = 0;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1];  caption.innerHTML = "<a target='_blank' href=" + url[imgNumber-1] + ">" + cap[imgNumber-1] + "</a>";    } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1];  caption.innerHTML = "<a target='_blank' href=" + url[imgNumber-1] + ">" + cap[imgNumber-1] + "</a>";  }function imglink(){	var x;	for(x=0;x<img.length;x++){		var imglink = document.getElementById('imglink');		var a = document.createElement('a');		var idx = x+1;							a.innerHTML = x+1 + ' ';		a.setAttribute("href","java script:showcase("+idx+")");				imglink.appendChild(a);		}	}function showcase(idx){	imgNumber = idx;	document.slideImage.src = img[imgNumber-1];	caption.innerHTML = "<a target='_blank' href=" + url[imgNumber-1] + ">" + cap[imgNumber-1] + "</a>";	pause();	}function thumbnails(){	var x;	for(x=0;x<img.length;x++){				var idx = x+1;		var icon = document.createElement('img');		icon.setAttribute("src",img[x]);		icon.setAttribute("onclick","showcase(" + idx +")");						icon.setAttribute("style","width:75px; height:75px; padding-right:15px;");		thumbnail.appendChild(icon);				icon.onmouseover = function(){				icon.className = "wider";			}			icon.onmouseout = function(){				icon.className = null;			}			}		}function imgToLink(){		if(document.slideImage.src == "http://www.creston.com/assets/images/layout/showcase.png"){		caption.innerHTML = "<span style='font-size: 10px;'>Just surf through the images in this slider <br /> Click on the images to go to the corresponding urls</span>";		window.open("#","_self");						}	else{		windowFeatures = "top=0, left=0, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width="+(screen.width)+",height="+(screen.height);		newWindow=window.open(url[imgNumber-1],"_blank",windowFeatures);		newWindow.focus();			}				}var autoplay;function play(){		var prev = previousImage;	var next = nextImage;		var playSwitch = new Array (prev,next);	var rand = Math.ceil(Math.random()*2)-1;		autoplay = setInterval(playSwitch[rand],1000);	}function randPlay(){	var rand = Math.ceil(Math.random()*img.length)-1;	document.slideImage.src = img[rand];	caption.innerHTML = "<a target='_blank' href=" + url[rand] + ">" + cap[rand] + "</a>";	}function shuffle(){	shuffle1 = setInterval(randPlay,1000); // It seems that the variable name cannot be the same as the function name	}function pause(){	clearInterval(autoplay);	clearInterval(shuffle1);	}function captionLine(){		caption.style.visibility = (caption.style.visibility == "visible") ? "hidden" : "visible";	}if(document.images){   var image1 = new Image()   image1.src = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg"   var image2 = new Image()   image2.src = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png"   var image3 = new Image()   image3.src = "http://www.techlifeweb.com/facebook_logo.jpg"   var image4 = new Image()   image4.src = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png"   }</script><style>a {	text-decoration: none;	font-size: 14px;   }img {	border: 0;}a:hover {	color: black;	font-size: 16px;	font-weight: bold;	}td#caption {	font-weight: bold; 	font-size: 20px; 	text-align: center; 	vertical-align: central; 	height: 40px;	}.wider {	width: 100px;	height: 100px;}</style></head><body><table style="width: 400px;"><tr><td id="thumbnail" colspan="7"></td></tr><tr><td colspan="7"><img onclick="imgToLink()" src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td id="caption" colspan="7"></td></tr><tr><td><a href="java script:previousImage()">Previous</a></td><td><a href="java script:nextImage()">Next</a></td><td><a href="java script:captionLine()">Caption</a></td><td id="imglink" width="576" align="center"></td><td><a href="java script:play()">Play</a></td><td><a href="java script:shuffle()">Shuffle</a></td><td><a href="java script:pause()">Pause</a></td></tr></table></body></html>

Please take a look at the thumbnails function.I successfully inserted onclick to link the thumbnails to their own images. But,when I inserted the onmouseover event and linked it with the thumbnails in order to produce some hover effects with the aid of CSS (className = "wider")it does not work.I single out the script and only test this bit of scriptand prove it to be working well.

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>window.onload = function(){		var img = document.createElement('img');	img.setAttribute("src","http://www.creston.com/assets/images/layout/showcase.png");	document.body.appendChild(img);		img.onmouseover = function(){				img.className = "wider";				}		img.onmouseout = function(){				img.className = null;				}		}</script><style>.wider {	width: 500px;	height: 500px;}</style></head><body></body></html>

Is there anything wrong with my first script?I thought I had been trapped in the complicated scripts somewhere I made some minor mistakes that lead to the breakdown of the scripts. But I can't see where I did wrong.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
are you checking for errors?
Yes. I believe there are some minor errors.
Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
You're calling thumbnails() before defining window.thumbnail.
Do you mean I should change the script like this:
window.onload = function(){	imgSize();	imglink();			window.caption = document.getElementById('caption');	window.thumbnail = document.getElementById('thumbnail');		thumbnails();	}

But not working still...

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Yes. Otherwise, your script is trying to use a variables called "thumbnail" that hasn't been set yet.Are you checking the browser's error console?

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Yes. Otherwise, your script is trying to use a variables called "thumbnail" that hasn't been set yet.Are you checking the browser's error console?
Yes. I believe there are some minor errors.
Are you planning on fixing them?
Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
Are you planning on fixing them?
Nope, I haven't tried testing the scripts on any consoles. I know, though, some of the good people here advised me to use them. But for a while I used them, I've found it's even more difficult than looking at JS scripts in dreamweaver so finally I let dreamweaver do the checking up job (I know the consoles are better than dw but just haven't yet known how to use the consoles, especially firebug or the IE built-in debugger :) )Yes, thank you for your keeping up with my problem.I'd planned to fix my errors, pretty much because of my fragmenting knowledge of both CSS and JS. When I tried mixing them together to produce some fancy effects, the problems came out as unexpected.I finally found how to achieve the hover-and-enlarging the thumbnails effect (whatachama call it).This is quite interesting at least to me, mates:
// Most complicated part to me when building this functionfunction thumbnails(){		var x;	for(x=0;x<img.length;x++){				var idx = x+1;		var icon = document.createElement('img');		icon.setAttribute("onclick","showcase(" + idx +")");		icon.setAttribute("src",img[x]);		icon.setAttribute("width","75px");		icon.setAttribute("height","75px");		icon.setAttribute("style","padding-right:15px");		thumbnail.appendChild(icon);							icon.className = "wider";				}		}

.wider:hover {	width: 100px;	height: 100px;}

I let CSS do the hover job so that the JS script does not have to do something like onmouseover and onmouseout, the part which dragged me in andI found I could not loop through the index images with those two JS events (I know it can be but just I made them wrong)But the CSS hover and using JS to attach the className to each of the thumbnails make the job easier than ever.I found I have been stuck at how to use the JS events (onmouseover and onmouseout) to trigger the hover and making-the-thumbnails-larger effectsbut even now my scripts are proven to be effectivejust I still scratch my head now in front of dreamweaver for a whole day, wondering which part of my JS scripts (in previous posts) were wrong andthinking there must be some advanced JS scripting which is beyond my present levelAnyway, if mates do have time, please look through my previous JS scripts and I look forward to anyone telling me how to solely use JS to make the same effectAnother thing that has kept me long was a bit of CSS ordering:If I setAttribute using the inline CSS style, I could not change the width and height of the images asinline CSS is above the internal CSSBefore I remembered this rule of CSS, I had been confused and mysterified about why I could not trigger the expected effects.But after realising that, I know a little bit of messing around of past knowledge of scripting or styling can cause me much trouble in testing the scripts and debugging for even a whole day.So debugging is really tiring...

icon.setAttribute("style","width:75px;height:75px;padding-right:15px;");

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
Yes. Otherwise, your script is trying to use a variables called "thumbnail" that hasn't been set yet.Are you checking the browser's error console?
Yes, I changed the order of that. Thanks for the reminder.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...