Script to show image when you put mouse over menu [Archive]

View Full Version : Script to show image when you put mouse over menu

Kofi

07-17-2007, 06:40 PM

im not sure if its CSS code, but I want to add to one of my webpages a little image to the right of the text menu when cursor goes over, I havent exaclty found an example of what I want to explain better.
I only want the image to show by the text when the cursor is over the text line.
Can any one help?

Ryan Fitton

07-18-2007, 09:33 AM

I think i have found some scripts like what you wanted here on DD. the scripts that i have found are javascripts, but i'm sure you could find CSS scripts out there. the first script (http://www.dynamicdrive.com/dynamicindex4/image5.htm) is a rollover script. I would suggest you try looking on the mouseover section on DD by clicking here (http://www.dynamicdrive.com/dynamicindex15/). :)

Kofi

07-18-2007, 10:47 AM

thanks, I looked through in that section before posting and didnt find what i was looking for.
i found a site that has sometihng similar to what im looking for:
http://www.makeyourdayspecial.co.uk/
the star shows only when you point at each section of the menu, is it java or css??

DimX

07-18-2007, 11:20 AM

Here, a simple skeleton

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
ul.menu {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.menu li a {
text-decoration: none;
padding-left: 15px;
}
ul.menu li a:hover {
background: url(http://www.dynamicdrive.com/forums/images/statusicon/post_new.gif) no-repeat left center;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href=".">Item</a></li>
<li><a href=".">Item</a></li>
<li><a href=".">Item</a></li>
<li><a href=".">Item</a></li>
</ul>
</body>
</html>

Ryan Fitton

07-18-2007, 12:28 PM

I don't know, but it looks as if its Javascript

Sliight

07-18-2007, 09:03 PM

The text menu I assume you're using on the left is arranged in CSS? Basically if you use the #sidemenu a:hover and set a background image for it. Just create the image using the same background color the menu is on, and then add the star, or small image of your choosing into it.

Your menu could be Java, but more than likely you'll see a <li> in there somewhere creating the list even if it is java. The example above I'm sure would work perfect... he just set hte <li> as the decendant.

Veronica

07-19-2007, 12:15 AM

If you want css to create an arrow or some other image to the left of your link when you hover, give your a href a class, add a span containing the image within the <a> and </a> tags, and then change the visibility of this span on hover in the css:

<style>
.picture {position:relative;}
.picture:hover {background-color: transparent;}
.picture span {visibility:hidden;}
.picture:hover span {visibility:visible;}
</style>

<a href="#" class="picture"><span><img src="arrowdown.gif"></span>link</a>