Announcement

**Mike Hughes** · 10-Apr-2014, 11:46 AM

I do like that. Simple and effective which I always admire.

Thanks for sharing.

Mike

**BillS** · 10-Apr-2014, 12:02 PM

Thanks Mike

However, i just had a panic attack:

Google may treat an image over an image the same as white text on a white background?!

Also, the Alt text is always associated witht the same image file name...

So, for now I am going to restrict it to just four pages and see what happens to the Rankings...

**jont** · 10-Apr-2014, 12:17 PM

A simple CSS solution which will work and will not affect google

the HTML

Code:

<div class="product">
<img src="image1.jpg" class="productMain">
<img src="wrap.png" class="productClear"> 
</div>

where image1.jpg is the existing product image
wrap.png is a small transparent image

the css

Code:

.product {
position: relative;
top: 0;
left: 0;
}

.productClear {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

this effectively moves the transparent image up and over the product image to fill the containing <div> ... right clicking saves the transparent image.

Just knocked this up in Notepad - you can use CSS3 to select the child > img or the class[attribute] but the above will work in new and old browsers

full html to play with

Code:

<!doctype html>
<html>
<head>
<style>

.product {
position: relative;
top: 0;
left: 0;
}

.productClear {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>

</head>
<body>
<h2>this is a test</h2>
<p>this is a line of text</p>
<div class="product">
<img src="image1.jpg" class="productMain">
<img src="wrap.png" class="productClear"> 
</div>

</body>
</html>

**jont** · 10-Apr-2014, 12:23 PM

I left out the alt="" tags above as just a proof of concept

**BillS** · 10-Apr-2014, 12:51 PM

Excellent Jont! Much cleaner implementation... Thanks

Are you confident Google won't penalise us? (We'll run a test for a month or so on a handful of pages...)

**jont** · 10-Apr-2014, 01:06 PM

There is no text in there (white on white as per your previous concern) and you can simply add a plain alt="image" attribute so Google sees the alt tag but not getting spammed by repetitive keywords.

This approach is common to add sale/offer/new flashes over images or even zoom icons so the user knows their is an interaction available.

**jont** · 10-Apr-2014, 01:11 PM

May be worth having a fiddle with .product::after selector as well to cut down on the HTML - insert the .png via the CSS content="" and not via the HTML

**BillS** · 10-Apr-2014, 01:12 PM

I was more concerned that we would have the same Title/Alt data for 2-different images. (We always use the product name as the title AND the Alt tag and the 'real' image filename is indicative of the product at hand) - we have read mixed opinions of whether the Image Filename + Title + Alt tag play a hand in Googles algorythms... In our opinion it does affect our rankings using the information in this way...

In turn, the seethrough image would have thousands of different Title/Alt tags throughout our site...

**jont** · 10-Apr-2014, 01:40 PM

Thats what I mean - keep the product image proper as you have it with the alt="" and title="" set as the product name and the transparent image set as alt="image"

to get different alt="" in the transparent image you could use alt="imageProductRef" where the ProductRef is the inbuilt variable ... or use any other such as the productid - that would give a unique alt="" to each of the transparent images and not affect anything

**BillS** · 10-Apr-2014, 01:52 PM

I've gone half way between the 2 ideas as, when we come to do Section Lists, the product name as the Title / Tag is 'better' (for the user) than Alt="Image"

So, Real Image:

Code:

	<img src="<actinic:variable name="ProductImageFileName" />" 
		class="productMain" 
		width="<actinic:variable name="ProductImageWidth" />" 
		Height="<actinic:variable name="ProductImageHeight" />" 
		Title="<actinic:variable name="ProductName" />" 
		Alt="<actinic:variable name="ProductName" />" />

See through image (append ProdRef):

Code:

	<img src="Image-18762.gif" 
		class="productClear" 
		id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
		<actinic:variable name="Lightbox" value="LightBox Image Code" />
		border="0"
		width="<actinic:variable name="ProductImageWidth" />" 
		Height="<actinic:variable name="ProductImageHeight" />" 
		Title="<actinic:variable name="ProductName" /> (Our Ref: <actinic:variable name="ProductReference" />)"
		Alt="<actinic:variable name="ProductName" /> (Our Ref: <actinic:variable name="ProductReference" />)" />

I don't think that shouldn't upset Google too much!

CHEERS!

**jont** · 10-Apr-2014, 02:47 PM

You will now have ProductName appearing at least 5 times against the product

Product Name itself
Product Image Title and Alt
Transparent Image Title and Alt

...plus whatever you have in the breadcrumb trail, page title and your meta keywords and description .....

.... that is potentially quite a lot of spammed keywords depending on the density of the rest of the text on the page ... I would definitely trial that out before getting rolling it out globally. For me I would have dummy alt="" for the transparent as not essential for the user (the title takes over) but will be spotted by google analaytics as a grumble at a missing alt tag.

As the transparent image is the one on top you can drop the title="" from the product image beneath as this is not being seen by the user on the mouseover event.

**jont** · 10-Apr-2014, 02:59 PM

src="Image-18762.gif"

how are you going to manually create all those individual images with unique filenames? if you go that route SellerDeck will look for thousands of uniquely named transparent images.... thats a no go.

keep it as src="image123456.png" for all of them and just create a single image with the same filename - this is the suggestion as per the original link so it looks like a real filename and not just "transparent.png"

**BillS** · 10-Apr-2014, 03:05 PM

Haha, No!

I just threw my fand at the Number Keypad and 18762 came out.

It's a single file that will be used for *all* images...

I might even name it:

Do-Not-Steal-Our-Copyrighted-Material-Your-IP-Address-has-been-Recorded.gif
...

**jont** · 10-Apr-2014, 03:07 PM

aha right ok - thought you were appending it with a SellerrDeck variable each time ... blimey ... talk about making a rod for your back that route

Announcement

Anyone ever had problems with Image Theft?

Anyone ever had problems with Image Theft?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment