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

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0

    Exclamation Different clickable hyperlink buttons issue


    Hi there!

    Here is a link to my code:
    jsfiddle DOT net/beechboy707/qVRS2/

    I have got exactly what I want, except for the fact that I can't see how to get the two different buttons (personalised and designed) to go to different links, any help much appreciated.

    Thanks,

    Max
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    58
    Rep Power
    1
    Can you paste the code in here instead of describing a link to it?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0
    Sure, the HTML:

    <div class="rollover">
    <p>

    <a href="/hoodies-personalised.html"><img src="URL">
    <span style="left:2px; top:140px;"><span class="button">Personalised</span>
    <span style="top:45px;"><span class="button">Designed</span>
    </a>

    <a href="/hoodies-personalised.html"><img src="URL">
    <span style="left:2px; top:140px;"><span class="button">Personalised</span>
    <span style="top:45px;"><span class="button">Designed</span>
    </a>

    <a href="/hoodies-personalised.html"><img src="URL">
    <span style="left:2px; top:140px;"><span class="button">Personalised</span>
    <span style="top:45px;"><span class="button">Designed</span>
    </a>

    </p>

    <!--end rollovers-->
    </div>

    The CSS:
    .rollover a {
    display: inline-block;
    position: relative;
    margin-right: 2%;
    text-decoration: none;
    color: #FFF;
    font-weight:bold;
    }
    .rollover a span {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 100;
    /**adjust where needed**/
    width:150px;
    /**same as image**/
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    }
    .rollover a:hover span, .rollover a:active span, .rollover a:focus span {
    visibility: visible;
    }
    .rollover a:hover, .rollover a:focus {
    visibility: visible;
    }
    .rollover a:hover img {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    }
    .button {
    text-decoration:none;
    text-align:center;
    padding:9px 17px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius: 2px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:18px;
    color:#FFF;
    background:#6f6f6f;
    opacity:0.94;
    filter: blur(none) !important;
    -webkit-filter: none !important;
    }
    span a:hover {
    padding:9px 17px;
    border:none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius: 2px;
    font:18px"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ffffff;
    background:#51b453;
    }
    .button:active {
    padding:9px 17px;
    border:none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius: 2px;
    font:18px"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ffffff;
    background:#6f6f6f;
    opacity:0.81;
    -ms-filter: progidXImageTransform.Microsoft.Alpha(Opacity=81);
    filter: alpha(opacity=81);
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    58
    Rep Power
    1
    This seems to be the problem:
    Code:
    <a href="/hoodies-personalised.html"><img src="URL">
    <span style="left:2px; top:140px;"><span class="button">Personalised</span>
    <span style="top:45px;"><span class="button">Designed</span>
    </a>
    Personalised and Designed are both contained within the same <a href> </a> tag, so both will go to /hoodies-personalised.html.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by aysiu
    This seems to be the problem:
    Code:
    <a href="/hoodies-personalised.html"><img src="URL">
    <span style="left:2px; top:140px;"><span class="button">Personalised</span>
    <span style="top:45px;"><span class="button">Designed</span>
    </a>
    Personalised and Designed are both contained within the same <a href> </a> tag, so both will go to /hoodies-personalised.html.
    Hi There,

    Thanks for the reply. I managed to fix it like this:

    http://jsfiddle.net/beechboy707/yQ7Ga/

    Thanks,

    Max

IMN logo majestic logo threadwatch logo seochat tools logo