Hover over image to text

[nikyee]

I am trying to have a gallery seperated by categories (ex. kids) I want to mouse over these and have a small box pop up with clickable text to sub-categories. (Ex. "New Life" and "growing up"

Thanks!

[azoomer]

Not sure if I understand your requirements correctly, but maybe you can use this (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm)

[nikyee]

Thanks! That will work I think, can I use this when over a photo? And adapt location/color? This forum is great for new people like me learning... thanks again!

[azoomer]

Yes, you can use it with photos, look at the image "get the news" on the demo page.
Also the color and the position of the menu can be adjusted, look at the "right dropping menu" example on the demo page (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm).

[nikyee]

Pleas help with this code. This is exactly what I need, but can not figure out where the text color is on the drop down menus? I have changed the drop down box to grey, but want white text. Also where do I write this code into an img tag as a hyperlink within the page?

[azoomer]

Regarding the text color you can try to find the css that looks like this


.anylinkcss ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
color:white; /* here I have added color: white; that should change the text color */
}

.anylinkcss a:hover{ /*hover background color*/
background: gray; /* this determines the background color on hover */
color: red; /* this determines the text color on hover */
}

Look at the red lines and read tho comments.

As for the image:


<a href="http://www.yourhyperlink.com" class="anchorclass" rel="submenu4" data-image="http://yourimagepath.com/yourimage.jpg" data-overimage="http://yourimagepath.com/yourimage.jpg"><img src="http://yourimagepath.com/yourimage.jpg" style="border-width:0" /></a>

this seems to be the way to apply the code to an image ( change the rel= "submenu4" to the relevant submenu name)
Hope it works. Post a link to a testpage if you are having trouble with it.

[nikyee]

The color changed!!! Thank you!! I am learning so much! Here is what I have for the image code:

<a href="http://www.willaddlater.com" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a>

It works but comes up below the image & I would like it to come up over the image or where the mouse is on the image... is there a code for this? Tried the "submenu4" but link stopped working.

Website is not up yet, as I am building it... so no hosting to be able to show live

[azoomer]

I'm not sure how to change the location of the dropdown, but if you look at the bottom of the demo page (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm) there is something you can try ( the "rev" attribute)

[nikyee]

Thanks... I tried the Rev... but it just moves it way left or up... I will keep trying to search. There must be a way to appear over the image