PDA

Click to See Complete Forum and Search --> : Javascript rollovers vs noscript graphic

Charville
05-15-2003, 02:47 AM
I like to use rollovers - if people have scripts disabled on their browsers, is there something I should put after the graphic tag

(example: <a href="/pages/" onmouseover="img2" onmouseout="img2a"><img src="/pages/img2.gif" alt="Graphic Here"></a>

that will show an alternative graphic for them in place of that rollover?

Thankx
Charles
05-15-2003, 05:19 AM
More frequently we just design the page so that we ca live with the button in its natural state. But if you want a three button solution then:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<img src="http://forums.webdeveloper.com/images/profile.gif" alt="">
<script type="text/javascript">
<!--
var img = document.images[document.images.length-1];
img.src = 'http://forums.webdeveloper.com/images/find.gif';
var preload1 = new Image();
preload1.src = 'http://forums.webdeveloper.com/images/find.gif';
var preload2 = new Image();
preload2.src = 'http://forums.webdeveloper.com/images/buddy.gif';
img.onmouseover = function () {this.src = preload2.src}
img.onmouseout = function () {this.src = preload1.src}
// -->
</script>
Charville
05-15-2003, 11:21 AM
Thanks for the tip...
Vladdy
05-17-2003, 10:33 AM
There is no need to use javascript for rollovers. CSS does an adequate job and degrades better:

<head>
<title>CSS Rollovers</title>
<style>
a.rollover
{ display: block;
width: 200px;
height: 50px;
background: url("LinkNormal.gif");
overflow: hidden;
line-height:150px;
}

a.rollover:hover
{ background: url("LinkHover.gif");
}
</style>
</head>
<body>
<a href="#" class="rollover">Link text</a>
</body>