Advanced Search

Results 1 to 9 of 9

Thread: Hover over image to text

  1. #1
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Hover over image to text

    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!

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Not sure if I understand your requirements correctly, but maybe you can use this

  3. The Following User Says Thank You to azoomer For This Useful Post:

    nikyee (01-26-2011)

  4. #3
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

  6. #5
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Regarding the text color you can try to find the css that looks like this
    Code:
    .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:
    Code:
    <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.

  8. #7
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #8
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    I'm not sure how to change the location of the dropdown, but if you look at the bottom of the demo page there is something you can try ( the "rev" attribute)

  10. #9
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •