Identifying invisible images!

[corrie]

Hi,

I've created a series of thumbnail image links that each open a lightbox. The problem is that because I wanted the thumbnail images to change on hover I have used CSS to change the background image on hover, then used a transparent .png for the image link so it is clickable.
This means that when I go to Articles and view my list of elements I obviously don't see the thumbnail images, just a list of blank elements. Is there anywhere I can give elements a name/notes here that will show up in this list so I can identify which thumbnail is which, without having to click on 'info' for each one?

I've attached an image to show the problem.

Thanks for any help.
Corrie

[corrie]

The above link appears to have broken, here's another image

[Andreas]

Don't know what you're doing here. But I bet that's absolute the wrong way.

[corrie]

Not helpful Andreas, If you read my post it explains what I'm trying to do!

I need my thumbnails to be rollovers, but also clickable image links. It appears Contao has no way of letting me do both, so this is my work around.
The point of posting here is to see if someone can help me find a better way, or show me how I can identify invisible elements in my elements list.

When I roll over my thumbnail image I need it to change to another image on rollover, I also need to click the thumbnail to open a lightbox. The only way I can see to do this is by using CSS to change the 'Background image' of my thumbnail to create the rollover, then using a transparent image for Contao to identify as my clickable area.
By doing this, there is nothing visible for Contao to display in the elements list here, hence the original question of 'How can I identify each element'

Grateful for any ideas or constructive criticism. Thanks

p.s. If I come across grumpy I'm 7mths pregnant, cut me some slack!

[Andreas]

It depends on what exactly should happen on hovering the image. Will you show another image? And is this other image on all thumbs the same one?

There are many solutions to achieve this.

Simply add a mouseenter event with mootools on the thumbs and change the SRC of the image.

or

Modify your template to not output an IMG for the thumb but a STYLE attribute with background-image: url(theThumb) on the link. Then you can change the background-image with CSS on hovering.

or

Simply hide the image with CSS display:none; when hovering over the link so a background-image of the link which first gets covered by the thumb becomes visible now.
.my_gallery a:hover .image_container { display: none; }

Please show a link to a page and a link to the image that will be shown on hovering. Then helping is easier.

[corrie]

Hi Andreas,
Thanks for your patience in replying again (especially after my initial grumpiness!!)
These options are super useful - thanks.
The thumbnail hover would need to be different for each thumbnail (i.e. each thumbnail is a product image - on rollover its name appears) so I'm not sure that the 2nd option will work cus I guess that would give the same rollover for every thumbnail?

Option 3 might work though so I'll give that a go and see.

I'm afraid option 1 sounds a bit advanced for me!
Thanks again

[corrie]

No luck with option 3 I'm afraid:

It may help to view the thumbnails at http://www.la-design.co.uk/index.php/me ... tific.html to see the effect I want. This is working fine - the problem is just that because I've used an invisible image as my 'Source image' I can't identify each thumbnail in my elements list (see attachment to second post).

This is how I foloowed your option 3 - please tell me if I did something wrong Thanks:

1) I've created each thumbnail by opening a 'New Element' type 'External Site (in a lightbox)

2) I set my Source Image to be the thumbnail image (see attached thumnail.jpeg) and gave it a CSS Class of 'elga'

3) In my code I type:

.elga
{
	width:190px;
	height:177px;
background-image:url("http://www.la-design.co.uk/tl_files/la-design/images/portfolio/thumbs_larger/elga_thumb_hover.jpg");
	border-top:0px;
}

.elga:hover .image_container
{
	display: none;

}

4) but obviously, when I hover over the thumbnail - the whole image container disappears, not just the source jpeg (see attached disappeared.jpg)

I'm sorry I'm so new to this ops:

[corrie]

How would I 'Simply add a mouseenter event with mootools on the thumbs and change the SRC of the image'

I've never done this before - is there a tutorial somewhere that could give me a basic walkthough?

Thanks

[Andreas]

Hi, this is not a good solution.

Dissapearing happens as the rollover images wait for loading till you hover.

You should try to output simple Text for this hover state. Completly without new Images. Even better for search engines. Try to add a headline and a paragraph to each image, then simply lay them above the images with CSS when you hover.

A good Idea is to give the IMG and the surrounding A a display:block; so you can easylie formate them exactly. Give the container surrounding the IMG and the new Text display:relative; so you can lay the text over the image with position: absolute; Transparent background can be done with either a transparent image or CSS background-color: rgba(255, 0, 0, .5)

To start with mootools you can use the doc and its examples http://mootools.net/docs/core/Element/Element.Event

To include the JS into the page, you can use this code as in the moo_ templates

<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {

    // your code here

  });
})(document.id);
/* ]]> */
</script>

[corrie]

Thanks Andreas, this is great, I'll go take a closer look

[thyon]

Why don't you just use the image caption. Then if you add a special class to a element, you can use that class to create a special hover CSS or display:block to show the caption and display:none to hide. You can make the caption be absolutely positioned so it overlays the image.