HTML Help needed...

ThinkBinary

Regular Member
Joined
Dec 13, 2013
Messages
296
Reaction score
96
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
 
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 ?
 
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 ?

Thank for the quick reply... I am sure there is a code for this just in html... onclick function maybe?
 
Well.. technically it's still Javascript:

Code:
<img src="" onclick="window.location.href='http://google.com';" />
 
Well.. technically it's still Javascript:

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

Thank You very much... What about if you want it to open in a new tab as well as make it a nofollow link?
 
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 ;)
 
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
 
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 :)
 
You would also need a touch of CSS so the pointer doesn't change right?

<a href="#" style="cursor:default">default</a>
 
You would also need a touch of CSS so the pointer doesn't change right?

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 :) )
 
You would also need a touch of CSS so the pointer doesn't change right?

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....
 
for future refrence check dynamicdrive.com they have tons of codes there
 
Just not sure how to add the nofollow in there lol
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?
 
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.
 
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?

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.
 
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.

To be honest that's what I would do, I prefer to keep as much as possible out of the limelight.
 
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.
 
Back
Top