How to make an image appear on top with rollover CSS

adam1h
adam1h used Ask the Experts™
on
Hello All,

I have a website www.joe-cool.co.uk/EN/home/home.cfm that uses a dropmenu in CSS.

However it works well, I'd like to push it further and have an image 55 x 55 pixels to appear on top when rooling over the UL.

Any idea how I could do that ?

Many thanks,
Adam.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sudaraka WijesingheWeb Application Programmer

Commented:
"...appear on top when rooling over the UL..." by this do you mean when mouse is over any element in you menu?

If so you may try a jQuery solution using some thing like $('#css3menu').hover(...);

Btw, when I move mouse over menu items I see JavaScript errors:

visibilite is not defined
https://www.joe-cool.co.uk/EN/home/home.cfm
Line 1

hideAll is not defined
https://www.joe-cool.co.uk/EN/home/home.cfm
Line 1
Umar Topia.Net Full Stack Developer

Commented:
You can use Z-Index

Author

Commented:
Hi Sudraka,

Thanks for telling me about the javascript error, I will look into it.

There is a call <script>for Jquery, but I'm not sure on where to place the $('#css3menu').hover(...);

#Umartopia,

I'm really crap at CSS, and Z-index will have to be placed somwhere, and the image needs to be called too, which I'm really not knowing how.

Here is the line that could be used, I suppose :

ul#css3menu a:hover>*{
    display:block;

But from there, I don't have a clue on how to put a z-index.

THanks a lot to both
Adam
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Umar Topia.Net Full Stack Developer

Commented:
You can refer the following URL for Z-Index:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Sudaraka WijesingheWeb Application Programmer

Commented:
to use the jQuery hover, you will need to enter the code in <script> tag just like you do with regular javascript.
more details on hover can be found here http://api.jquery.com/hover/
Sudaraka WijesingheWeb Application Programmer

Commented:
Sorry for got the code:
<script type="text/javascript" language="JavaScript">
//<![CDATA[

$(function(){

$('#css3menu').hover(
	function(){
	//code for mouser over (in) goes here,  for example: to display a tag with id="img55x55"
		$('#img55x55').show();
	},
	function(){
	//code for mouser out goes here,  for example: to hide the above image
		$('#img55x55').hide();
	}	
);

});

//]]>
</script>

Open in new window

Adam,

You do this using just html/css.  Create a div named whatever, then apply the following css

#whatever
{Display:none}

Ul li:hover #whatever
{display:block;
Position:relative;
Left:xxxpx;
Top:xxxpx;
Z-index:9999}

Author

Commented:
Hey

Sorry It took me so long to get back to you.

Great scripts, but I haven(t been clear enough.

Each button has got a different image, andif I applied or Javascript or CSS, then I'm stucked because it will only display one 'icon' and not a different one each time.

Any ideas ?

Thanks for sharing your knowledge.

Adam.
Web Application Programmer
Commented:
I think the most suitable and easiest solution for you is to use image sprite as the background of your menu elements and position it using CSS. (I didn't mentions this before because you preferred a non-CSS based solution).

Read this: http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial