Help - Search - Members - Calendar
Full Version: Rollovers...
Forums > Resource Center > Webmasters' Corner
jaderbug
Jul 3 2008, 08:59 PM
Okay so i've been having trouble with rollovers.
I do not have imageready nor dreamweaver, and im not good with java script.

i've read tutorials but for some reason my brain can not grasp it.


I also have 3 other images that will go on that page, and they will each be different images with their own special rollover, but i can't do it if i dont even know how to properly do one rollover!!!

Here is my code, its pretty scattered but oh well.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Welcome</title>
  <meta http-equiv="imagetoolbar" content="no">
  <style type="text/css">
  </style>
</head>
<body>
<br>
<script language="JavaScript">
<!--
Browser = false;
if(navigator.appName.indexOf("Netscape") != -1)
{ if( (navigator.appVersion.indexOf("3.") != -1) || (navigator.appVersion.indexOf("4.") != -1) )
Browser = true}
if(navigator.appVersion.indexOf("MSIE") != -1) { if( navigator.appVersion.indexOf("4.") != -1)
Browser=true}
if ( Browser == true) {
roll1= new Image();
roll1.src = "http://img.photobucket.com/albums/v149/jadejadejade/asdf/image1.png";
roll2 = new Image();
roll2.src = "http://img.photobucket.com/albums/v149/jadejadejade/asdf/image1-2.jpg";
}
function x05(place, imgName) {
if (Browser == true) {
document[place].src =eval(imgName + ".src");
} }
//-->
</script>
<div id="content">
<center>
<div style="font-family: Helvetica;"><big><big><big><big><big><big>JADE
DP</big></big></big></big></big></big></div>
<div>
<a href="index.html" onmouseover="x05('myrollover','roll2')"
onmouseout="x05('myrollover','roll1')"> <img
src="http://img.photobucket.com/albums/v149/jadejadejade/asdf/image1.png"
name="myrollover" border="0" height="275"
width="346"></a></div>
</center>
</div>
</body>
</html>


HELP ME PLEASE!!
fixtatik
Jul 4 2008, 07:08 AM
why exactly are you using javascript for rollovers? the easiest way is just with simple css.

what i usually do, instead of using two images, is combine both images into one. the reason for this is so when a visitor hovers over the link, it won't go blank for a split second (it would if you were to use two images), and it saves on load time, because the browser doesn't have to make two different requests. put the image for the regular link (not hovered) above the image for the hovered link, like this:


then the code is similar to this:
CODE
<style type="text/css">
a.link1 { background:url(IMAGE FOR LINK1) top left no-repeat; display:block; width:##px; height:##px; }
a.link1:hover { background:url(IMAGE FOR LINK1) bottom left no-repeat; }
</style>

<a class="link1" href="LINK"></a>
jaderbug
Jul 4 2008, 07:27 PM
Yeah i keep on trying to get that to work but non of the ways i try work.
hm. thanks anyways.
fixtatik
Jul 4 2008, 10:16 PM
well, you could always copy and paste this directly and change what you need to change...though it's exactly the same as above. if it still doesn't work, then you have some extra coding that's preventing it from working.
CODE
<style type="text/css">
a.fds-hom-1 { background:url(http://fixtatik.com/images/contactbuttons/1/hom.png) top left no-repeat; display:block; height:41px; width:73px; }
a.fds-hom-1:hover { background:url(http://fixtatik.com/images/contactbuttons/1/hom.png) bottom left no-repeat; }
</style>

<a class="fds-hom-1" href="#"></a>
Melissa
Jul 5 2008, 12:53 AM
^ yeah.

I wouldn't resort to javascript unless you're trying to get a lot to change at once or something.

Is it me or have there been more and more topics/questions about rollovers lately?
fixtatik
Jul 5 2008, 03:11 AM
^ it's just you--still the typical 20-30 a day xD
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.