| lambdaka |
Apr 8, 2010 04:44 PM |
[SOLVED] Rollover image with css in header
First thanks to for this wonderfull theme ! ! ! !
Hi everyone,
I try to use rollover image with css (with no javascript) in the header..
Everything work in html page on my computer.
But when I put the code in the header area, the image off the rollover buttons will not load....?
Does someone know what can be the problem..?:confused::confused:
css code i added to the styleshhet
Code:
#rollover { background-image:url(wp-content/uploads/utiles/header/images_menu/header_03.jpg); height: 28px; width:70px; display:block; }
#rollover span { display:none; font-size:x-small; }
#rollover:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_03_rollover.jpg; }
#rollover1 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_05.jpg; height: 28px; width:69px; display:block; }
#rollover1 span { display:none; font-size:x-small; }
#rollover1:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_05_rollover.jpg; }
#rollover2 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_07.jpg; height: 28px; width:66px; display:block; }
#rollover2 span { display:none; font-size:x-small; }
#rollover2:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_07_rollover.jpg; }
#rollover3 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_09.jpg; height: 28px; width:59px; display:block; }
#rollover3 span { display:none; font-size:x-small; }
#rollover3:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_09_rollover.jpg; }
#rollover4 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_11.jpg; height: 28px; width:47px; display:block; }
#rollover4 span { display:none; font-size:x-small; }
#rollover4:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_11_rollover.jpg; }
#rollover5 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_13.jpg; height: 28px; width:87px; display:block; }
#rollover5 span { display:none; font-size:x-small; }
#rollover5:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_13_rollover.jpg; }
#rollover6 { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_17.jpg; height: 24px; width:25px; display:block; }
#rollover6 span { display:none; font-size:x-small; }
#rollover6:hover { background-image:http://www.krikor.fr/wp-content/uploads/utiles/header/images_menu/header_17_rollover.jpg; }
etc...
and the code I added to the header area
Code:
<!-- Save for Web Slices (header.psd) -->
<table id="Table_01" width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="21">
<img id="header_01" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_01.jpg" width="950" height="113" alt="" /></td>
</tr>
<tr>
<td>
<img id="header_02" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_02.jpg" width="228" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/" id="rollover"><span>home</span></a></td>
<td>
<img id="header_04" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_04.jpg" width="19" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/profile" id="rollover1"><span>profile</span></a></td>
<td>
<img id="header_06" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_06.jpg" width="19" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/music/" id="rollover2"><span>music</span></a></td>
<td>
<img id="header_08" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_08.jpg" width="19" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/shop/" id="rollover3"><span>shop</span></a></td>
<td>
<img id="header_10" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_10.jpg" width="19" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/gigs/" id="rollover4"><span>gigs</span></a></td>
<td>
<img id="header_12" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_12.jpg" width="19" height="28" alt="" /></td>
<td>
<a href="http://krikor.fr/contact/" id="rollover5"><span>contact</span></a></td>
<td colspan="9">
<img id="header_14" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_14.jpg" width="229" height="28" alt="" /></td>
</tr>
<tr>
<td colspan="21">
<img id="header_15" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_15.jpg" width="950" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="13">
<img id="header_16" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_16.jpg" width="818" height="24" alt="" /></td>
<td>
<a href="http://www.facebook.com/pages/Krikor/28315890427?ref=ts/" target="_blank" id="rollover6"><span>facebook</span></a></td>
<td>
<img id="header_18" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_18.jpg" width="5" height="24" alt="" /></td>
<td>
<a href="http://twitter.com/KrikorAndTheDH/" target="_blank" id="rollover7"><span>twitter</span></a></td>
<td>
<img id="header_20" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_20.jpg" width="4" height="24" alt="" /></td>
<td>
<a href="http://www.myspace.com/krikorparis/" target="_blank" id="rollover8"><span>lastfm</span></a></td>
<td>
<img id="header_22" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_22.jpg" width="5" height="24" alt="" /></td>
<td>
<a href="http://www.myspace.com/krikorparis/" target="_blank" id="rollover9"><span>myspace</span></a></td>
<td>
<img id="header_24" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_24.jpg" width="18" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="21">
<img id="header_25" src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/header_25.jpg" width="950" height="12" alt="" /></td>
</tr>
<tr>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="228" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="70" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="69" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="66" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="59" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="47" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="19" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="87" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="97" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="5" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="4" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="5" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="25" height="1" alt="" /></td>
<td>
<img src="http:///www.krikor.fr/wp-content/uploads/utiles/header/images/spacer.gif" width="18" height="1" alt="" /></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
here is the url of the site
http://www.krikor.fr/catalog
(the home page, it's not available for the moment)
thanks ! !:):) |
