PDA

View Full Version : get images to change when link visited.



steve_9
Dec 3rd, 2008, 10:18 PM
On my site im currently using a set of rollover images as the navigation.

The images are all kept in palce with a div identified in the CSS file.

However i now wish to have the images change when a user has visted the page to which the images link to.

I've seen this is possible using CSS but as each image is different i cant see this as an option. Is there a way with normal HTML to make the image change when clicked on or do i need to make a uniform background and then use text as the distingusing feature for each link? I gues i could then have the background change when the link is clicked on using the CSS method.

To see what i mean as i don't think vie explained it too well is a link to my site (http://www.lumotorsport.com) where you should se what i mean.

Thanks in advance

Steve

Excavator
Dec 3rd, 2008, 11:43 PM
Hello steve_9
I have an example of a 3 state rollover done with CSS using only one image (so there is no wait for hover effect). I think that's exactly what your looking for...


link (http://nopeople.com/CSS/CSS_rollover/index.html)



.

steve_9
Dec 4th, 2008, 09:03 AM
yeh that seems to be what i want. I have all the images i need to use but i cant really grasp how you've coded the CSS. i copy and pasted your code and changed the relavant image sources but it doesn't work.

bit lost to be honest.

Steve

Excavator
Dec 4th, 2008, 10:22 AM
Let's see how far you've gotten with it. Post your code.

A link to the images would really be helpful too!

steve_9
Dec 4th, 2008, 11:12 AM
im currently at some university lectures but when i get back home i will post up my code for what ive done so far.I did get it working but when i uploaded it it all went wrong.

thanks for your help again

Steve

steve_9
Dec 4th, 2008, 02:35 PM
heres my HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LU Motorsport</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../test/stylesheet.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body onload="MM_preloadImages('../test/images/index_23b.jpg','../test/images/index_25b.jpg','../test/images/index_26b.jpg','../test/images/index_27b.jpg','../test/images/index_28b.jpg','../test/images/index_31b.jpg')">
<div id="container">
<div id="top">
<img src="../test/images/index_01.jpg" width="1024" height="76" alt="" />
</div>
<div id="internallinks">
<a href="http://www.lboro.ac.uk" target="_blank">
<img src="../test/images/index_02.jpg" alt="text" width="216" height="36" border="0" /></a>
<a href="http://www.lboro.ac.uk/prospectus/ug/dept/tt/index.htm" target="_blank">
<img src="../test/images/index_03.jpg" alt="text" width="244" height="36" border="0" /></a>
<img src="../test/images/index_04.jpg" width="81" height="36" alt="text" />
<a href="http://www.lboro.ac.uk/prospectus/ug/dept/mm/index.htm" target="_blank">
<img src="../test/images/index_05.jpg" alt="text" width="270" height="36" border="0" /></a>
<img src="../test/images/index_06.jpg" width="23" height="36" alt="text" />
<img src="../test/images/index_07.jpg" width="19" height="36" alt="text" />
<a href="http://www.lboro.ac.uk/prospectus/ug/dept/iptme/index.htm" target="_blank"><img src="../test/images/index_08.jpg" alt="text" width="95" height="36" border="0" /></a>
<img src="../test/images/index_09.jpg" width="52" height="36" alt="text" /> <img src="../test/images/index_10.jpg" width="24" height="36" alt="text" />
<!--end internallinks-->
</div>
<div id="sponsors">
<img src="../test/images/index_11.jpg" width="112" height="48" alt="text" />
<a href="http://www.perkins.com/" target="_blank"><img src="../test/images/index_12.jpg" alt="text" width="104" height="48" border="0" /></a>
<a href="http://www.castrol.co.uk/" target="_blank"><img src="../test/images/index_13.jpg" alt="text" width="112" height="48" border="0" /></a>
<a href="http://www.deloitte.com/" target="_blank"><img src="../test/images/index_14.jpg" alt="text" width="113" height="48" border="0" /></a>
<a href="http://www.raf.mod.uk/careers" target="_blank"><img src="../test/images/index_15.jpg" alt="text" width="100" height="48" border="0" /></a>
<a href="http://www.dekra.com/" target="_blank"><img src="../test/images/index_16.jpg" alt="text" width="107" height="48" border="0" /></a>
<a href="http://www.patternsandmoulds.com" target="_blank"><img src="../test/images/index_17.jpg" alt="text" width="46" height="48" border="0" /></a>
<a href="http://www.compms.co.uk" target="_blank"><img src="../test/images/index_18.jpg" alt="text" width="63" height="48" border="0" /></a>
<a href="http://www.gwcast.co.uk" target="_blank"><img src="../test/images/index_19.jpg" alt="text" width="77" height="48" border="0" /></a>
<a href="http://www.aerovac.com/" target="_blank"><img src="../test/images/index_20.jpg" alt="text" width="75" height="48" border="0" /></a>
<img src="../test/images/index_21.jpg" width="115" height="48" alt="text" />
<!--end sponsors-->
</div>
<div id="background">
<div id="l-menu">
<div id="links"><a href="index.htm"><center>Home</center></a></div>
<br>
<div id="links"><a href="news.htm"><center>News</center></a></div>
<br>
<div id="links"><a href="the_team.htm"><center>The Team</center></a></div>
<br>
<div id="links"><a href="../test/the_cars.htm"><center>The Cars</center></a></div>
<br>
<div id="links"><a href="../test/events.htm"><center>Events</center></a></div>
<br>
<div id="links"><a href="../test/media.htm"><center>Media</center></a></div>
<br>
<div id="links"><a href="../test/partners.htm"><center>Partners</center></a></div>
<br>
<div id="links"><a href="../test/contact_us.htm"><center>Contact Us</center></a></div>
<br>
</div>
<!--end l-menu-->
</div>


<div id="small">

Welcome to the Loughborough University Formula Student Website.
<br>
<br>
<b>-- Latest News --</b>
<br>
<br>
The Site is currently under construction so please vist back soon when more content will be online.
<br>
<br>
</div>

</div>
<!--end background-->
</div>
<!--end container-->
</div>
</body>
</html>


And heres my CSS :


/* CSS Document */

body{
text-align:center;
background: #fff;
font: 16px "Arial">;
color: #003366;
text-decoration: none;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container{
margin: 20px auto;
width: 1024px;
height: 801px;
text-align: left;
}
#top{
height: 76px;
background: url(../test/images/index_01.jpg) no-repeat;
}
#internallinks{
overflow: auto;
height: 36px;
}
#internallinks img {
float: left;
}
#sponsors{
overflow: auto;
height: 48px;
}
#sponsors img{
float: left;
}
#background{
overflow: auto;
height: 640px;
background: url(../test/randbkgs/rotate.php) no-repeat;
}
#l-menu {
margin: 0 0 0 15px;
overflow: auto;
background:transparent;
float: left;
height:575px;
width: 170px;
}
#links {
height: 31px;
width: 153px;
float:left;
}
#links a:visited {
background: url(../test/images/blankb.gif) center;
color:#ffffff;
text-decoration:none;
font-family:arial;
}
#links a:hover {
background: url(../test/images/blankb.gif) bottom;
color:#ffffff;
text-decoration:none;
font-family:arial;
}
#links a {
display:block;
height: 31px;
width: 153px;
background: url(../test/images/blankw.gif);
color:#003366;
line-height:25px;
text-decoration:none;
font-family:arial;
}
p {
font:arial;
font-size:12pt;
font-color:#003366;
}
#background03{
overflow: auto;
height: 640px;
background: url(../test/images/lfs03bg.gif) no-repeat;
}
#background04{
overflow: auto;
height: 640px;
background: url(../test/images/lfs04bg.gif) no-repeat;
}
#background05{
overflow: auto;
height: 640px;
background: url(../test/images/lfs05bg.gif) no-repeat;
}
#background06{
overflow: auto;
height: 640px;
background: url(../test/images/lfs06bg.gif) no-repeat;
}
#background07{
overflow: auto;
height: 640px;
background: url(../test/images/index_22.jpg) no-repeat;
}
#background08{
overflow: auto;
height: 640px;
background: url(../test/images/lfs08bg.gif) no-repeat;
}
#backgroundp{
overflow: auto;
height: 640px;
background: url(../test/images/index_22.jpg) no-repeat;
}
#small{
margin-left:450px;
margin-right:20px;
margin-top:-600px;
float:right;
height:200px;
width:300px;
overflow:auto;
text-align:center;
}
#large{
margin-left:190px;
margin-right:20px;
margin-top:10px;
float:top;
height:500px;
width:800px;
overflow:auto;
text-align:left;
}


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:gallery/image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(gallery/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(gallery/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


the images are called blankw.gif and blankb.gif . they are in a folder called images and i want the blankw to be the backgorund and balnkb to be the visted link background and the hover background.

Thanks in advance

Steve

Rowsdower!
Dec 4th, 2008, 03:47 PM
Hi Steve. The method Excavator linked you to requires the images to be combined into a single image file. The hover and visited effects serve only to change the vertical alignment of that single image.

In effect, you want to make a 3-panel, vertically tiled image (each "tile" should be the same dimensions) that has each of the three states you want the link to show regularly, on hover, and then after the link is visited.

So, step 1: combine your images into a single file with one placed directly above the other.

Step 2: fix the "background" portions of your CSS for your links. They should all use the same image file.

Alternatively, of course, you could use a similar principal and display 3 different images. To do that you would just delete the "bottom" and "center" from your #links hover and visited sections, then use three unique image files (or in your case 2 since you are using the same image for hover and visited links). The downside to this - and I would imagine the reason Excavator recommended using a single file - is that the user ends up downloading images 2-3 times for the same page which is not optimal.

steve_9
Dec 4th, 2008, 05:39 PM
ahhh , thank you very much.

I have the CSS bit working now. Not sure if i like the way that it rembers which ones you've visted when you come back to the site but its ok for now.

It's skewed one of my Div's but i think that i just need to repostion it.

Thank you all