I like to use rollovers - if people have scripts disabled on their browsers, is there something I should put after the graphic tag <br />
<br />
(example: <a href=http://www.webdeveloper.com/forum/archive/index.php/"/pages/" onmouseover="img2" onmouseout="img2a"><img src="/pages/img2.gif" alt="Graphic Here"></a><br />
<br />
that will show an alternative graphic for them in place of that rollover?<br />
<br />
Thankx<!--content-->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:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Script-Type" content="text/javascript"><br />
<title>Example</title><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://forums.webdeveloper.com/images/profile.gif" alt=""><br />
<script type="text/javascript"><br />
<!--<br />
var img = document.images[document.images.length-1];<br />
img.src = 'http://forums.webdeveloper.com/images/find.gif';<br />
var preload1 = new Image();<br />
preload1.src = 'http://forums.webdeveloper.com/images/find.gif';<br />
var preload2 = new Image();<br />
preload2.src = 'http://forums.webdeveloper.com/images/buddy.gif';<br />
img.onmouseover = function () {this.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/preload2.src">http://www.webdeveloper.com/forum/archi ... eload2.src</a><!-- m -->}<br />
img.onmouseout = function () {this.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/preload1.src">http://www.webdeveloper.com/forum/archi ... eload1.src</a><!-- m -->}<br />
// --><br />
</script><!--content-->Thanks for the tip...<!--content-->There is no need to use javascript for rollovers. CSS does an adequate job and degrades better:<br />
<br />
<head><br />
<title>CSS Rollovers</title><br />
<style><br />
a.rollover<br />
{ display: block;<br />
width: 200px;<br />
height: 50px;<br />
background: url("LinkNormal.gif");<br />
overflow: hidden;<br />
line-height:150px;<br />
}<br />
<br />
a.rollover:hover<br />
{ background: url("LinkHover.gif");<br />
}<br />
</style><br />
</head><br />
<body><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="rollover">Link text</a><br />
</body><!--content-->
<br />
(example: <a href=http://www.webdeveloper.com/forum/archive/index.php/"/pages/" onmouseover="img2" onmouseout="img2a"><img src="/pages/img2.gif" alt="Graphic Here"></a><br />
<br />
that will show an alternative graphic for them in place of that rollover?<br />
<br />
Thankx<!--content-->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:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Script-Type" content="text/javascript"><br />
<title>Example</title><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://forums.webdeveloper.com/images/profile.gif" alt=""><br />
<script type="text/javascript"><br />
<!--<br />
var img = document.images[document.images.length-1];<br />
img.src = 'http://forums.webdeveloper.com/images/find.gif';<br />
var preload1 = new Image();<br />
preload1.src = 'http://forums.webdeveloper.com/images/find.gif';<br />
var preload2 = new Image();<br />
preload2.src = 'http://forums.webdeveloper.com/images/buddy.gif';<br />
img.onmouseover = function () {this.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/preload2.src">http://www.webdeveloper.com/forum/archi ... eload2.src</a><!-- m -->}<br />
img.onmouseout = function () {this.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/preload1.src">http://www.webdeveloper.com/forum/archi ... eload1.src</a><!-- m -->}<br />
// --><br />
</script><!--content-->Thanks for the tip...<!--content-->There is no need to use javascript for rollovers. CSS does an adequate job and degrades better:<br />
<br />
<head><br />
<title>CSS Rollovers</title><br />
<style><br />
a.rollover<br />
{ display: block;<br />
width: 200px;<br />
height: 50px;<br />
background: url("LinkNormal.gif");<br />
overflow: hidden;<br />
line-height:150px;<br />
}<br />
<br />
a.rollover:hover<br />
{ background: url("LinkHover.gif");<br />
}<br />
</style><br />
</head><br />
<body><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="rollover">Link text</a><br />
</body><!--content-->