Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Question for CSS Gurus

Image swapping on Unordered Lists

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

Preferred Member

10+ Year Member

joined:May 24, 2002
posts:482
votes: 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....

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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>
1:47 pm on Aug 5, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 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>

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

Preferred Member

10+ Year Member

joined:May 24, 2002
posts:482
votes: 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.

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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? ;)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members