New Comer (less than 5 posts)
Script to show image when you put mouse over menu
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?
Regular Coders
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 is a rollover script. I would suggest you try looking on the mouseover section on DD by clicking here.
New Comer (less than 5 posts)
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??
Regular Coders
Here, a simple skeleton
HTML Code:<!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>
Last edited by DimX; 07-18-2007 at 06:49 PM.
Regular Coders
I don't know, but it looks as if its Javascript
Regular Coders
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.
Regular Coders
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:
Code:<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>
Posting Permissions
Reply With Quote
Bookmarks