Webdesigners/developers, I require help

Technology and Gaming Help and Support
#1

So I created some new productpages for this company’s website. These pages contain thumbnails that can be clicked on to pop a shadowbox-like javascript for a bigger version. All was well and the design has been used for about 30 pages so far, and about 120 images in total.

However, according to the website’s statistics and recorded surfing behavior, we noticed that the images don’t get clicked on very often. My boss blames the lack of indication that the images can be clicked, so he’d like a magnification icon to decorate the lower right corner of the images.

Instead of just opening the 120-odd thumbnails and adding an icon, I was looking for ways to automatically add the icon to the lower right corner. But my search has been unsuccessful so far.

The best way I can think of, is to give each image its own div, with said image as background-image. Then add a generic zoom-icon as a proper image on top of that that can be clicked. But the problems with this are:

  • It doesn’t account for the variable width and height of each thumbnail
  • It requires me to go through the code of those 30 pages and manually change the tags around
  • It’ll be a dreadful task for anyone else but me to update/crate pages

So, would there be any way to force images to automatically have the zoom-icon when the -tag is within an -container? Either through plain old CSS (ideal, but doubtful) or Javascript, but my Javascript knowledge is pretty limited, sadly.

#2

Your boss is a moron. How about simply stating at the top of the thumbnails that you can click on them to see a larger image? https://www.catzeyes93.com/images/blackmesafaces/index.html

That is just my unprofessional small opinion of course.

#3

Because that would only work on a page with nothing but images (aka galleries). On pages with a fair bit of text (or just -text- in general), a message like that would go lost.

Anyway, I kinda figured a way out, but it’s not ideal… Unless I position it on the top instead of at the bottom. But it still suffers from unideal updatability this way.

<a href="link">
  <span></span>
     <img src="image">
</a>

Then style the span in CSS with “display: block;”.

Result:

#4

Hey I like that. It clearly tells me the image is clickable.

#5

You should keep in mind that every nationality, every business and every age has its own kind of surfers.

Someone like you is obviously familiar with the internet and you surf like an American girl in your mid-fillthisinyourselfsoidontoffendyou’s. But a 50 year old Russian guy that works at a printshop surfs like a 50 year old Russian printer. Completely different than you, completely different at me, but still a possible costumer to the company.

#6

why haven’t you used a database and php for the images?
and whatabout a mouse pointer which indicates that the images can be zoomed?

#7

In my experience, when people see a small image, they automatically think they can be clicked to be enlarged. People click on anything that they find interesting, even if it can’t be clicked or if there’s no indication about whether it will actually do something or not.

As for the code, I have no idea. I only know Flash and only at a basic level.

#8
  1. Because our current CMS is 6 years old and it only has a very basic image database that doesn’t allow for easy updates (only thing that works is to go to the resources folder (with the images in) and figure out which image is which (since it autorenames them to things like “3975_170x95.jpg”). We’re negotiating with partners for a new CMS to be used in October/November).
  2. Tried that, refused to load the cursor :frowning: + it doesn’t help at all when the visitor doesn’t even move his mouse over the images.

And yes, it is to my understanding that people prefer to click images as well, but apparently a lot of them don’t. Unless our thumbnails say enough, which I doubt.

#9

I think the zoom icon needs to be a bit darker.

#10

There are tons of really nice “click” images on the internet. But I am not sure if you are looking for a click image or if you are looking for code info similar to what you have there in order to get this done.

#11

https://www.nirmaltv.com/2008/10/18/watermark-multiple-images-quickly-with-watermarkv2/ ?

Founded in 2004, Leakfree.org became one of the first online communities dedicated to Valve’s Source engine development. It is more famously known for the formation of Black Mesa: Source under the 'Leakfree Modification Team' handle in September 2004.