1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML Help needed...

Discussion in 'HTML & JavaScript' started by ThinkBinary, Nov 18, 2014.

  1. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Hi guys,

    I have seen images that when you hover on them do not display the destination url and do not appear clickable like when you hover over normal images, but if you do click it takes you to the given url.

    What HTML code can one use to make that happen?

    Thanks
     
  2. Diplomat

    Diplomat Jr. VIP Jr. VIP Premium Member

    Joined:
    Oct 25, 2011
    Messages:
    872
    Likes Received:
    410
    Occupation:
    CEO
    Code:
    <img src="//random.img/wat.jpg" class="imglink" url="//google.com" />
    Code:
    $(function()
    {
        $('.imglink').click(function()
        {
            window.location.href = $(this).attr('url');
        });
    });
    
    Maybe something like this ?
     
  3. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Thank for the quick reply... I am sure there is a code for this just in html... onclick function maybe?
     
  4. Diplomat

    Diplomat Jr. VIP Jr. VIP Premium Member

    Joined:
    Oct 25, 2011
    Messages:
    872
    Likes Received:
    410
    Occupation:
    CEO
    Well.. technically it's still Javascript:

    Code:
    <img src="" onclick="window.location.href='http://google.com';" />
     
  5. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Thank You very much... What about if you want it to open in a new tab as well as make it a nofollow link?
     
  6. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    57
    Likes Received:
    24
    Location:
    near Vienna, Austria
    simply add an <a> tag around the image like this:
    <a href="..."><img src="..." /></a>
    <a href="..." target="_blank">...</a> for new tab
    <a href="..." rel="nofollow">...</a> for nofollow

    hope that helps ;)
     
  7. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Adding that does not work because its java...

    So I tried this:

    Code:
    <img src="#" onclick="window.open('http://www.yahoo.com', '_blank')" />
    Just not sure how to add the nofollow in there lol
     
  8. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    57
    Likes Received:
    24
    Location:
    near Vienna, Austria
    I don't exactly get what you mean by it's not working because its java how is you html code created?

    I don't know about your possibilities but if you go with the onclick attribute you could try to make it a nofollow by instead of directly passing the link to the onclick event send it to an own url of your page which redirects to the link where you want to go. then make that url of your page a nofollow in the robots.txt file

    e.g. /link?url=[linkurl] is the link which you add in the onclick attribute. It's just a script which takes the url param and redirects you

    then in the robots.txt file add something like:
    User-agent: *Disallow: /link


    Just an idea and I'm no profi haha but maybe something of that helps can't say too much without knowing more about the circumstances. hope you'll find the right way :)
     
  9. 1ksao

    1ksao Regular Member

    Joined:
    Jul 18, 2013
    Messages:
    209
    Likes Received:
    53
    Occupation:
    Full time Web Developer/SEO
    Location:
    Texas, baby.
    You would also need a touch of CSS so the pointer doesn't change right?

     
  10. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    57
    Likes Received:
    24
    Location:
    near Vienna, Austria
    That's right, I forgot about that ;) if possible in an external css-file ( a.some-class:hover { cursor:default; } just if anybody is wondering :) )
     
  11. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Pointer does not change... no need to touch the CSS.... the onclick function takes care of that.

    And smart... Id just take it to a redirect and make that nofollow although it would be better to make it nofollow without redirecting to a blank page first....
     
  12. Bestcreaters

    Bestcreaters Power Member

    Joined:
    Jul 10, 2013
    Messages:
    605
    Likes Received:
    259
    Occupation:
    money maker
    Location:
    Making Money is important
    for future refrence check dynamicdrive.com they have tons of codes there
     
  13. Nascent

    Nascent Newbie

    Joined:
    Nov 18, 2014
    Messages:
    3
    Likes Received:
    2
    Occupation:
    Web Developer
    Location:
    Liverpool, UK
    To the best of my knowledge, search engines do not count Javascript window.location as a link to follow or credit it towards SEO in any way. While changing a window location onclick would be simple for Google to check, imagine other circumstances whereby there's conditional statements or the window.location change is part of a longer script, that's a lot of parsing and Google will never be able to interpret when this anchor is supposed to link correctly, and what that link's relevance is.

    I honestly wouldn't worry about it. What's the context here?
     
  14. ThinkBinary

    ThinkBinary Regular Member

    Joined:
    Dec 13, 2013
    Messages:
    288
    Likes Received:
    89
    Occupation:
    Internet Marketing, Forex Trader
    Location:
    South Africa
    Home Page:
    Good point mate... I will actually check it and see if it counts as an outbound link... The image when clicked goes to an affiliate link and I do not want google to follow that.
     
  15. moanon

    moanon Registered Member

    Joined:
    Aug 30, 2014
    Messages:
    57
    Likes Received:
    24
    Location:
    near Vienna, Austria
    I'm not sure but I think I read that google does find this kind of links and I also wouldn't be sure it doesn't. If the onclick is directly in the html it wouldn't be hard to find and interpret it.
    I also did some affiliate links with js but I did it with an external js file which is blocked by robots.txt. This way the js shouldn't be loaded and therefor the click event handlers aren't even added, so nothing to find.
     
  16. rob1977

    rob1977 Power Member

    Joined:
    Mar 25, 2013
    Messages:
    773
    Likes Received:
    666
    To be honest that's what I would do, I prefer to keep as much as possible out of the limelight.
     
  17. ZeroHats

    ZeroHats Newbie

    Joined:
    Jul 20, 2013
    Messages:
    26
    Likes Received:
    4
    It could have been a button with an image but with no pointer.
     
  18. lightning37

    lightning37 Newbie

    Joined:
    Dec 12, 2014
    Messages:
    21
    Likes Received:
    4
    You could just do:

    HTML:
    Code:
    <a href="yourURL" class="img-links" rel="nofollow" target="_blank"><img src="yourURL"/></a>
    
    CSS:
    Code:
    .img-links {
        cursor:default
    }
    
    If the user is paying attention the browser will still show the destination url, but if you want to make sure the link is indexable this would be the way to go I think. If you absolutely want to make sure that the user does not know its a link but it remains indexable, you could do the same code as I described but position an empty div on top that could call the javascript.