PDA

View Full Version : WC3 Valid image replace



greens85
Oct 16th, 2009, 04:16 PM
Hi all,

I'm trying to do a simple image replace, where the image is intially black and white and goes to full color on a rollover...

however I can't find a valid way to do this? Im using a strict doctype.

Can anyone advise, or is this not possible?

Thanks,

Greens85

many_tentacles
Oct 16th, 2009, 04:23 PM
You could try something like this except using background-image rather than color...


<style type="text/css">
div.test {background-color:#0C6; width:100px; height:100px;}
div.test:hover {background-color:#000;}
</style>

<div class="test">...</p>

Scriptet
Oct 16th, 2009, 04:35 PM
Also just to add, :hover only works on a's in IE6, unless you add the CSS Hover fix (some JS) for IE6.

a:hover { .. } This is fine for all browsers
div:hover { .. } Won't work in IE6 unless fix is applied

greens85
Oct 16th, 2009, 05:00 PM
Hey guys thanks for the replies, the only issues I can see with this is that each image is not in its own div...

as I want them to line up one after the other...

they are currently displayed like so:


<a href="http://www.coversupervisors.co.uk"><img src="images/CS_Logo.gif" width="150" height="59" class="noborder" alt="Cover Supervisors - Quality staff cover for schools" title="Cover Supervisors - Quality staff cover for schools"/></a>

<img src="images/spacer.gif" width="12" height="1" class="noborder" alt="" title="" />

<a href="http://www.playworkers.co.uk"><img src="images/PW_Logo.gif" width="150" height="59" class="noborder" alt="Play Workers" title="Play Workers"/></a>

<img src="images/spacer.gif" width="12" height="1" class="noborder" alt="" title="" />

<a href="http://www.sportscoaches.co.uk"><img src="images/SC_Logo.gif" width="150" height="59" class="noborder" alt="Sports Coaches" title="Sports Coaches" /></a>

<img src="images/spacer.gif" width="12" height="1" class="noborder" alt="" title="" />

<a href="http://www.teachervacancies.com"><img src="images/TV_Logo.gif" width="224" height="59" class="noborder" alt="Teacher Vacancies - Bringing teachers &amp; employers together" title="Teacher Vacancies - Bringing teachers &amp; employers together"/></a>

bazz
Oct 16th, 2009, 05:05 PM
Have you a link to your page? I reckon you would be better putting them into a <ul><li></li></ul> list. then you can add padding or add margin attributes to do away with the unnecessary spacer image.

hth
bazz


check out the nav bar at the to of this page and see that it is done like this (in a list)



<div id="cfnavbar">
<ul>

<li><span><a id="leftcorner" href="usercp.php">User CP</a></span></li>



<li><a href="faq.php" accesskey="5">FAQ</a></li>

<li><a href="calendar.php">Calendar</a></li>


<li><a href="search.php" accesskey="4">Search</a></li>

<li><a href="search.php?do=getnew" accesskey="2">New Posts</a></li>



<li><a href="#" onclick="window.open('misc.php?do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollba rs=yes,resizable=yes,width=250,height=300'); return false;">Contacts</a></li>




<li><a href="login.php?do=logout&amp;logouthash=1255705508-8c39f508af6a0177a95ffb271013fab233f70405" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></li>

<li><a href="http://www.codingforums.com/rules.htm">Rules</a></li>

<li><a href="http://www.codingforums.com/postguide.htm" id="rightcorner">Guidelines</a></li>
</ul>

</div>

Scriptet
Oct 16th, 2009, 05:07 PM
In the addition to the above, you need to use an image-replacement technique to be able to use CSS hovers (use the images as background images, instead of images in the markup). Otherwise if you want to keep the image in the markup you'd have to use Javascript to change the image SRC on hover.

greens85
Oct 16th, 2009, 05:19 PM
Have you a link to your page?

Yeah...

http://www.teachingagencies.co.uk/testpages/index.php

Images in question are at the bottom of the page!

bazz
Oct 16th, 2009, 05:38 PM
I would start with something like this: a list of items, where they are empty but, they are sized to allow the background image to show through. then when you hover over them, they change as per the css background attribute. The classes, I would suggest, should relate to ther purpose of the image or the name of the partner.



<div id="partners">partner sites...
<ul>
<li><a class='coversupervisors' href="http://www.coversupervisors.co.uk" alt="Cover Supervisors - Quality staff cover for schools" title="Cover Supervisors - Quality staff cover for schools" /></a>
</li>
<li><a class='playworkers' href="http://www.playworkers.co.uk" alt="Play Workers" title="Play Workers"/></a>
</li>
</ul>
</div>


Then in the css



#partners ul li{
width:150px;
padding:0 10px 0 10px; /* adds a gap of 10px to each side */
display:block;
}

.playworkers a:link {
width: 150px;
line-height: 18px;
display:block;
background-image: url(/images/default_image.gif);
}

.playworkers a:hover {
background-image: url (/images/rollover_image.gif);
}



Not tested but it should give you a pointer in the right direction.
if you have different sizes of image (as I see now, you do), you might be better to assign classes to the li tag and make them the size that each partner's image requires. just play about with it (after backing up your current script/page).

bazz

greens85
Oct 16th, 2009, 05:46 PM
Thanks Bazz,

Some great advice there, much appreciated...

Will have a play about with it & hopefully get something near what I want! :thumbsup: