4images Forum & Community

4images Issues / Ausgaben => Installation, Update & Configuration => Topic started by: edwin on May 13, 2005, 12:11:22 PM

Title: Image on mouseover
Post by: edwin on May 13, 2005, 12:11:22 PM

When you hold your mouse over a thumbnail, after a few seconds it show the imagename but is i also possible to change this to show the description belonging to the image

Title: Re: Image on mouseover
Post by: ascanio on May 13, 2005, 04:59:50 PM

I have never realized of this funtion because n firefox it does not work! is there any way to change the code for firefox?

Title: Re: Image on mouseover
Post by: Chris on May 13, 2005, 06:32:16 PM

Firefox correctly obeys the w3c standard and looks for the "title" attribute on the image tag which isn't set.  4images only sets the "alt" attribute which Internet Explorer incorrectly uses as the "title" attribute.  Find the function get_thumbnail_code inside includes/functions.php and copy the "alt=" bit and change the word alt to title

Title: Re: Image on mouseover
Post by: edwin on May 13, 2005, 07:26:19 PM

And the "title" tag can then display the description
I'm looking for somthing like used at this site www.brunopress.nl, when put the mouse over a thumbnail it shows the IPTC Description off the photo

thanks

Title: Re: Image on mouseover
Post by: boatman9999 on May 15, 2005, 08:04:36 PM

A 'mouseover' effect can be done with CSS (ie no javascript).

Works with text links and image links.

Add to the style.css in templates folder:

Code: [Select]

div#info a span {
display: none;
text-decoration : none;
}

div#info a:hover span {
display: block;
position: absolute;
width: 125px;
right: 0px;
padding: 5px;
margin: -75px 50px;
z-index: 100;
color: Black;
background: White;
font: 10px;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
text-align: center;
text-decoration : none;
}

Play around and change the styles to suit your needs.

Use in links as in following example:

<div id="info">
<a href="./index.php>Index Page<span>Put here what you want to display in the pop up</span></a>
</div>

All this (and more) found  at  http://www.meyerweb.com/eric/css/edge/popups/demo.html to whom all the credit should go!

Title: Re: Image on mouseover
Post by: V@no on May 15, 2005, 08:10:30 PM

interesting..is that a standart? I've never seen such method

[edit]
just checked your demo page with IE and FF with JS turned off - and it worked! amaizing :D

Title: Re: Image on mouseover
Post by: Chris on May 16, 2005, 01:52:26 AM

Yep.  Those two at Meyerweb.com have always been at the leading edge of what CSS can do and written books/articles on the subject