What do you expect when you click on an image?

If by chance you’ve visited this blog more than once, chances are decent that you may have clicked on an images from time to time. I’ve been inconsistent on purpose since day one about what a click means with a photo. Sometimes it sends you to the site that the image is showing, most times it sends you to my flickr site. Does this drive you crazy? Typically if I send the photo to flickr it’s b/c I’m looking to see what people are interested in clicking or that it’s actually a photo that kind of works better in it’s natural habitat of flickr.

I’m thinking of making it policy that if the image looks like a site it will automatically head to the site it’s representing. If the image can’t send you to a new site maybe I kill the outbound link – good idea, bad?

On a side note, do you find it equally annoying that when you rollover an image, the dotted black line disappears and jerks the content from below up?

BUT – when you click on an image on any site – what are you hoping for?

Blog Widget by LinkWithin
  • litherland

    On a side note, do you find it equally annoying that when you rollover an image, the dotted black line disappears and jerks the content from below up?

    CSS. Borders. Padding.

  • http://designnotes.info/ michaelsurtees

    are you suggesting that i change the css caren?

  • http://sergiosantos.info Sérgio Santos

    Well, the effect of rolling over an image shouldn't mess with the whole text. It doesn't fell very good.

    About the images links, when I click on a image, I expect to see it bigger. Linking to a Flickr page usually enables me to do that, but you could try keeping the link in the photo description on Flickr, if there is one. In the case when the image is a screenshot of a website (or a logo), then I think linking directly to the website is the most expected outcome.

    But just choose whatever you prefer, stick with it and I'll get used to 😉

  • http://eightface.com dave kellam

    I'm generally hoping that it goes the site that you're linking too. I'm down with the Flickr link, but it would be cool if you could put a link to the site in the description of the photo on Flickr. If you're hosting the image on Flickr, technically you have to link back to their site according to their terms of service (but that doesn't stop people).

    Anyway, just my two cents. And thanks for the link on Coudal in December…

  • http://joeclark.org/weblogs/ Joe Clark

    Michael, Michael, Michael. I know you have a magnificent set of blue eyes, but you really need to learn more about HTML and CSS.

    Try using a title attribute on your links to explain where a link goes. Or just say so in the plain text that introduces the image.

    You need to look at your CSS :hover and :focus states, and also at your background, if you’re concerned about lines showing up. a img needs to be styled differently from a and from img. I have had my own troubles with that combination.

  • http://danielmclaren.net danielgm

    I agree with Sergio regarding the content shifting. Should be able to fix that by increasing the bottom margin when the border is removed.

    As for image links, when I click an image I usually want to see it bigger. It doesn't really matter whether this means loading up a larger image or showing the actual site.

    I had this dilemma on my blog as well, I had an image of a website in the blog entry and clicking that leads to the actual site. No problem. But I used the same image in the teaser so I wasn't sure whether I should link that to the website or to the blog entry.

  • Travis

    Definitely need to fix the hover/focus issue–aside from the content “jumping” up when you hover over the image, there's about a 1-2 pixel line just above the dotted rule that causes the content to vibrate up and down when hovering. Should be an easy fix, but can be a pain.

    Regarding where a picture link should go, flickr is fine if the image is in your library. If it's borrowed from the linked page, however, I think it's good to somehow indicate this (beyond using the title attribute of the link or image, which is still a good idea). Ideas range from the more subtle/less obvious (like a different treatment of the image–maybe a different color or style horizontal rule below the image) to most obvious/least subtle (text or link below the image that attributes the image to the source, thereby indicating the connection). The point I'm getting at is that there should be a difference in treatment.

    Hope my two cents helps! Good luck. I thoroughly enjoy reading your posts.

  • http://designnotes.info/ michaelsurtees

    right – i'm going to kill that line below the image once i can figure out how to that that. thanks for the feedback…

  • http://designnotes.info/ michaelsurtees

    makes sense, as i continue it's def. a good idea to have a direct url from the image. in the past i was hoping that people coming from flickr we're clicking to come to my post which in turn would send them off to the said site. (hope that makes sense).

    and np on the coudal link…

  • http://designnotes.info/ michaelsurtees

    i won't argue that i do need to learn more html and css. i spent most of xmas doing just that – if i was making something from the ground up, the css would be very different from what i've inherited from this blog template. i'm just starting now to fix what was originally there.

    but thanks for those hover and focus states tips, will look into it…

  • http://designnotes.info/ michaelsurtees

    i know, i kind of go back and fourth about where the links should go. if it's a pure image as opposed to a screen shot of a site, i'm going to have the pure image go bigger on flickr. and as i mentioned above the screen shots are now going to direct people to the site. i guess it's one of those things were you have to experience it for a while before i could make the best decision.

  • http://designnotes.info/ michaelsurtees

    hear you on the hover/focus issue, it's been good to hear some pov's outside of my own.

    thanks for the feedback on the images, good things to consider.

  • http://eightface.com dave kellam

    Understandable that you want to drive traffic to your site. You could put links to both your site, and the one that's in the screenshot.

  • http://designnotes.info/ michaelsurtees

    that's the plan from now on in – makes sense to do that…

  • http://looceefir.wordpress.com Kevin O'Neill

    I definitely expect something that functions as an explanatory website of some kind, and not just a bigger image, as some people think we want.

  • insub2

    In your style.css around line 109:

    .archive a:link img, .entry a:link img {
    border:medium none;
    vertical-align:top; <—-ADD THIS LINE!!!

    This will hide dotted line behind the image. And will work so long as you don't have images with transparent areas about 14px from the top and you don't add padding to the sides of you images.

  • http://designnotes.info/ michaelsurtees

    that worked – thanks a ton for passing that on. much appreciated