Question for CSS Gurus

Forum Moderators: not2easy

Message Too Old, No Replies

Question for CSS Gurus

Image swapping on Unordered Lists

RossWal

7:50 pm on Aug 2, 2002 (gmt 0)

Say I have a ul containing a list of links (< a > tags). Further say I've used the list-style-image property of the ul to use old.gif for the bullet images. Now say I've used the list-style-image property of a li within the ul to display new.gif for one bullet. Now I want to be able to swap out the new.gif for old.gif as soon as the user clicks on the link. I can handle it server side for the next page display (cookies), but can I do it with client side JS so they'll get old.gif if they return via the back button? I'm pretty sure I can take care of it client side using a two column table, but I'd rather avoid that and stay with the ul and css.

Has anyone run into this before?

Thanks!

PS I can post some code if the above is confusing....

DrDoc

5:26 pm on Aug 3, 2002 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
a {
list-style-image: url("path_to_img/new.gif");
}
a:visited {
list-style-image: url("path_to_img/old.gif");
}
</style>
<script language="JavaScript" type="text/javascript">
function imgswp(which) {
if(document.all) {
document.all[which].list-style-image.style = "path_to_img/old.gif";
}
else if(document.getElementById) {
document.getElementById(which).list-style-image.style = "path_to_img/old.gif";
}
}
</script>
</head>
<body>
<ul>
<li><a id="first" href="page1.html" onclick="imgswp('first')">First</a></li>
<li><a id="second" href="anotherpage.html" onclick="imgswp('second')">Second</a></li>
<li><a id="third" href="page3.html" onclick="imgswp('third')">Third</a></li>
<li><a id="fourth" href="blah.html" onclick="imgswp('fourth')">Blah</a></li>
</ul>
</body>
</html>

moonbiter

1:47 pm on Aug 5, 2002 (gmt 0)

[snip good DrDoc example of mouseover]

Dang, I banged my head against this for like a half hour and didn't think of that. Nice call, DrDoc!

<edited>
Except now that I look at it, it won't work, because there are some syntax problems:

<script type="text/javascript">
function imgswp(which) {
if (document.all) {
document.all[which].[b]style.listStyleImage = "url('path_to_img/old.gif')"[/b];
} else if (document.getElementById) {
document.getElementById(which).[b]style.listStyleImage = "url('path_to_img/old.gif')"[/b];
}
}
</script>

Also note that quotes in CSS URIs are optional.

Furthermore, it won't work in Mozilla or Opera because you declare the li markers on the anchor tags, and this just won't work.

AFAIK, there is no way to tell another part of a document if a certain link has been visited or not through javascript ... which was why I was banging my head against it in the first place.

Still, the a:visited approach above works in IE, which is closer to the goal than any of my attempts got.

For the record, this is as far as I got when I worked on it:

<html>
<head>
<title></title>
<style type="text/css">
body {
background: white;
color: black;
font: 12px Verdana, sans-serif;
}
a:hover {
color: red;
text-decoration: none;
}
li {
list-style-image: url(blue.gif);
}
</style>
<script type="text/javascript">
var bullet = new Array('red.gif', 'green.gif', 'blue.gif')
function init() {
var liNodeList = document.getElementsByTagName('li');
for (i = 0; i < liNodeList.length; i++) {
liNodeList[i].style.listStyleImage = 'url(' + bullet[2] + ')';
for (j = 0; j < liNodeList[i].childNodes.length; j++) {
if (liNodeList[i].childNodes[j].nodeName == 'A') {
liNodeList[i].childNodes[j].onclick = bulletClick;
liNodeList[i].childNodes[j].onmouseover = bulletOver;
liNodeList[i].childNodes[j].onmouseout = bulletOut;
}
}
}
}
function bulletClick() {
this.parentNode.style.listStyleImage = 'url(' + bullet[0] + ')';
}
function bulletOver() {
this.parentNode.style.listStyleImage = 'url(' + bullet[1] + ')';
}
function bulletOut() {
this.parentNode.style.listStyleImage = 'url(' + bullet[2] + ')';
}
</script>
</head>

<body onload="init();">
<ul>
<li>List item <a href="foobar.htm">foobar link</a></li>
<li>List item <a href="foobar.htm">foobar link</a></li>
<li>List item <a href="foobar.htm">foobar link</a></li>
<li>List item <a href="foobar.htm">foobar link</a></li>
</ul>
</body>
</html>

</edited>

RossWal

6:30 pm on Aug 5, 2002 (gmt 0)

As luck would have it, for this particular problem I'm only interested in IE. This is one of those all-too-rare occaisions when an 'As luck would have it' falls in my favor. Usually it seems to go the other way.

You guys are awsome.

DrDoc

8:50 am on Aug 6, 2002 (gmt 0)

Oops! What can I say, moonbiter? Thanks for noticing. You are right, there are some serious syntax problems in my example, but you fixed it :) Thank you!

What can I say? Early mornings? ;)