#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2

    Trying to make text and image link work together


    Ok I searched on Google first to see if I could find an answer to this question and couldnít find anything related. So I have a a div with a link inside it and an image inside the link. The divs position is relative. I have another div with text to put over the button and this div is also positioned as absolute. I image link has a hover state so when the cursor hovers over it, the image changes to a darker image.

    The Problem: When I test this out and scroll over the image, the hover works fine, but when I scroll onto the text which is in the middle of the image, the hover reverts back to the original image. How can I get the image link and text to work together so that if someone scrolls over the image or over the text, they both effect the hover so the image changes. And also how would I center the text in the image while the div is an absolute

    Hereís my code.

    Code:
    <div id="trailersmenu">
       <div id="trailerstext" class="menufont2">
          Trailers ▾
       </div>
       <a href="trailers.php" target="_self"><img    src="images_folder/header/newheader/buttons/png/new-trailers.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-trailershover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-trailers.png'" width="107" height="55" border="0" alt="Trailers" /></a>
    </div>
    Code:
    #trailersmenu { 
    
    position: relative; 
    float: left; 
    width: 107px; 
    height: 55px; 
    }
    
    trailerstext {
    
    position: absolute;
    top: 23px;
    left: 22px;
    text-align: left;
    }
    If I havenít explained what Iím trying to do clearly, an example would be the buttons on the top menu of stack overflow's website, they have text inside the image, you can tell its text and not an image of text because when you click somewhere on the page and drag over a button from the menu, you can select the text inside the button. When you hover over the button, the text and image state work simultaneously and thatís what Iím trying to do. Thanks for your time and help!
    Last edited by andy1212; September 8th, 2013 at 09:13 PM.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there andy1212,

    if you give me the two images, I will show you how to code it without javascript.


    coothead
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    Hey thanks for the reply, it's just one image inside a link in an absolute div and then text inside another absolute div, and I have the text div positioned over top the image div. Then I have the image setup so when you hover over it with the cursor, it changes to a darker image as shown in the code provided in my opening post and this works fine, however the text doesn't work with the button because when hovering over the text the image goes back to the first image. Which makes sense because I haven't made the two work together so I guess I'm wondering is there a way where they can both work together so whether I hover over the image or the text, the image stays in a hover state with the darker image still appearing. If there is another way to do it I'm open to other suggestions for sure! I attached both images the first image is transparent because there is a background already in the menu bar and the second image is a dark blue rectangle with a gradient. Essentially I'm trying to make a drop down but want to get this part working first, I'm currently reading up on sprites for the drop down. Thanks for your time!
    Attached Images
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86
    Hi there andy1212,

    check out the attachment, to see the coding example.

    coothead
    Attached Files
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2
    Thanks! That helped me out a lot!
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    247
    Rep Power
    86

    No problem, you're very welcome.

    coothead
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    You need to use more than just "linear-gradient()" for cross-browser development.

    I recommend using this tool to generate them: http://www.colorzilla.com/gradient-editor/

    It gives you a lot of syntaxes, especially if you enable "IE9 support" (which I recommend doing, because SVG is a good thing). If you use the SVG, then not all of the other syntaxes are needed. Look at how long such code is: (The forum system adds spaces to the SVG URI that shouldn't be there.)
    Code:
    background: rgb(30,87,153);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    The following is what I'm actually using on a project, to have maximal browser support with minimum code (and in this case avoiding the error from the validator for the "filter" property). In short, I remove the newer of the two "-webkit-" prefixed syntaxes and the "-ms-" prefixed syntax. Chrome 26 and newer support no fewer then four ways -- both "-webkit-" prefixed syntaxes, SVG, and the non-prefixed "linear-gradient()". I ask you, is overriding the gradient not once or twice but three times really needed? No version of IE supports only the prefixed syntax without also supporting the non-prefixed syntax (at this point, preview versions of IE10 don't count), so MS themselves say you shouldn't use it. Also I decided IE8 and older didn't need the gradient, so I removed the (non-standard) "filter" property as well.
    Code:
    	background: #276300;
    	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KPGxpbmVhckdyYWRpZW50IGlkPSJ1Y2dnIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQo8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjUiLz4NCjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN1Y2dnKSIvPg0KPC9zdmc+");
    	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0))); /* Safari 4-5.0.x */
    	background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); /* FF 3.6-15 */
    	background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); /* Opera 11.10-12.00 */
    	background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0)); /* Chrome 26, FF 16+, IE 10+, Opera 12.10+ */
    You can save a little more space, as I did, by decoding the SVG, optimizing it, and then base64 encoding it again.
    Last edited by Kravvitz; September 10th, 2013 at 09:39 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Location
    Ludhiana
    Posts
    3
    Rep Power
    0
    Give your anchor tag background url set image path then anchor tag value...
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    27
    Rep Power
    0
    You could do this with CSS, or with Javascript.
    CSS Option:

    a:hover span { color:red; }
    <a href="1.html">
    <img src="1.jpg" />
    <span>Title: One</span>
    </a>

    In that example, we have our text and image both within a link. We are then modifying the color of the text on the :hover event.

    Javascript (jQuery):

    div.hovered p { color:red; }

    <div class="preview">
    <img src="1.jpg" />
    <p>Title: One</p>
    </div>

    $("div.preview img").hover(
    function () { $(this).parent().addClass("hovered"); },
    function () { $(this).parent().removeClass("hovered"); }
    );

    This example showcases a solution that simply adds a class to the parent container, which in turn modifies the representation of the title. This event is controlled by hovering the image within the container.

    Update:

    Positioning your text isn't that difficult. The quick-and-easy method would be to position the parent container with relative, and the text with absolute:

    <div class="container">
    <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
    </a>
    </div>

    div.container { position:relative; width:150px; }
    div.container span.title { position:absolute; top:0; left:50px; width:100px; }

    That's a quick example. You can modify the values to your needs.

IMN logo majestic logo threadwatch logo seochat tools logo