Hi,
I was wondering how to do, or if a stack does this
My page would have 3 or 4 text boxes on the left, and when one hovers over (or touch on tablets/smartphones) the text boxes, an image would appear on the right.
Example: 3 Text boxes, 1 image
Mt Hood
Mt St Helens | PICTURE |
Mt Adams
When the user hovers on Mt Hood, the picture would be Pic1, when on Mt St Helens, the picture would be Pic2, etc…
Any way to do this? I have a lot of lightbox and slideshow stacks, but I don’t seem to have found one that would trigger a picture display when hovering over Text…
I have found the code. But I see that it is not text but a thumbnail with the hover effect.
Maybe I / you can modify the code appropriately. Are you interested?
It is important with which theme the CSS code is used. Must be set differently for each theme.
Hi,
I thought about implementing Javascript to handle such a thing, but was looking for the lazy way… And I’m not sure whether the javascript would see the difference between a mouse click and a tablet/phone finger tap. It’s probably possible to adapt your code.
I have adapted the code (on the theme HV Stripped). That was very simple.
With or without thumbnails, as you wish.
Maybe you like it that way. Without Javascript.
Try this code with my pictures. Should immediately work with HV Stripped (and others, but not perfect). Look here!
Once with thumbnail
then without image
3 and 4 only with links
<a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="0px" height="0px" border="0" />Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>
<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><div align="center">Hallig klein</div></span></a>
<a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a></div>
Here the CSS code
gallerycontainer{
position: relative;
/Add a height attribute and set to largest image’s height to prevent overlaying/
}
@sjordi
Here another code, image in Resources and image responsive. Look here!
<div class="gallerycontainer">
width and height 0px <a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="0px" height="0px" border="0" />Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>
Thumbnail and image on server <a class="thumbnail" href="#thumb"><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" width="80px" height="50px" border="0" /><span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><br />Hallig klein</span></a>
image on server, subtitle centered <a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligklein.jpg" /><div align="center">Hallig klein</div></span></a>
image in resources, size original <a class="thumbnail"/>Here text for a link<span><img src="%resource(halligmit.jpg)%" /><br />Hallig klein</span></a>
image responsive <a class="thumbnail"/>Here text for a link<span><img src="http://www.oscar-schmid.ch/bilder/halligmit.jpg" width="100%"/><br />Hallig</span></a></div>
<a class="thumbnail"/>Here text for a link<span><img src="%resource(halligmit.jpg)%" width="100%"/><div align="center">Hallig klein</div></span></a></div>
Sometimes, after a long practice it comes naturally (Ok, I used to live in the US, that helps a lot too)
The english language, slang, idiosyncrasies are hard to learn/understand even when you know the darned language lol