Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Rollover image with css in header


  #1  
Old Apr 8, 2010, 05:44 PM
lambdaka's Avatar
lambdaka
 
94 posts · Apr 2010
France
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..?

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 ! !

Last edited by lambdaka; Apr 8, 2010 at 05:53 PM.
  #2  
Old Apr 9, 2010, 08:32 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
let me know when it is available in the site
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 10, 2010, 12:41 PM
lambdaka's Avatar
lambdaka
 
94 posts · Apr 2010
France
hi
I just made a mistake in css part

I was:
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; }
or that
Code:
#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; }
but simply it need the url : (http://www......)
Code:
#rollover1 { background-image:url(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; }
you can check here
http://www.krikor.fr/profile
every page are available except the blog
thanks, I guess I was tired !

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help: Using cu3er flash image slider in header -- quick CSS help needed everyman Header configuration & styling 5 Apr 27, 2010 11:14 AM
Suggestions Please! Need plugin to create rollover images for image map. kippiper Plugins & Atahualpa 0 Nov 15, 2009 05:30 PM
Rollover image not working in Internet Explorer 6 Masselyn Page & Category Menu Bars 0 Oct 12, 2009 12:25 PM
[SOLVED] Rollover Graphic in Header Whatsthatcat? Header configuration & styling 2 Sep 25, 2009 08:51 AM
How to add 2 link rollover buttons in horizontal header bar stevemitch2 Header configuration & styling 2 Jun 4, 2009 10:47 AM


All times are GMT -6. The time now is 03:56 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.