...

View Full Version : Any way to put img hover state in inline css?



Cim
06-12-2012, 07:49 AM
So I'm not by any means set on using inline css to get this to work, but I don't know if there's any other way. I'm using a .js slidingPanels plugin to navigate through the pages on this site. So onclick it slides to the next panel. But the issue is the actual image btn where you click - is there any way to have that img change to another img on hover with the way this is set up?


<div id="mainNavigation">

<ul>

<li> <a href="#" onclick="sp2.showPanel(1); return false;"><img src="images/agency.png"></a></li>

<li> <a href="#" onclick="sp2.showPanel(2); return false;"><img src="images/work.png"></a></li>

<li> <a href="#" onclick="sp2.showPanel(3); return false;"><img src="images/latest.png"></a></li>

<li> <a href="#" onclick="sp2.showPanel(4); return false;"><img src="images/info.png"></a></li>

</ul>

</div>

awgentry
06-12-2012, 04:02 PM
You can create a ".button" class, then add a class to each link, such as ".agency" and ".work". Once that's done, you can use the :hover pseudo-class to change the background image on rollover:



<head>
<style>
.button { height:100px; width:100px; display:block; }
.agency { background-image:url('agency.png'); }
.agency:hover { background-image:url('agencyh.png');}
.work { background-image:url('work.png'); }
.work:hover { background-image:url('workh.png');}
</style>
</head>

<body>
<div id="mainNavigation">
<ul>
<li><a class="button agency" href="#" onclick="sp2.showPanel(1); return false;"> </a></li>
<li><a class="button work" href="#" onclick="sp2.showPanel(2); return false;"> </a></li>
</ul>
</div>

Cim
06-12-2012, 06:15 PM
Worked like a charm. Thank you!

awgentry
06-13-2012, 03:01 PM
You can make it better for accessibility/SEO by changing the code a bit:


.button { height:100px; width:100px; display:block; text-indent: -99999px; }

...

<li><a class="button agency" href="#" onclick="sp2.showPanel(1); return false;">Agency</a></li>

This text isn't seen by the average user, but shows up for screen readers and search engines.

I got this from Kyle Schaffer's post (http://kyleschaeffer.com/best-practices/pure-css-image-hover/), where he describes a similar technique.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum