homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Question for CSS Gurus
Image swapping on Unordered Lists
RossWal




msg:1220204
 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




msg:1220205
 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




msg:1220206
 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




msg:1220207
 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




msg:1220208
 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? ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved