Author Topic: Image on mouseover  (Read 7770 times)

0 Members and 1 Guest are viewing this topic.

Offline edwin

  • Full Member
  • ***
  • Posts: 199
    • View Profile
    • http://www.foto-janssen.nl
Image on mouseover
« 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

Offline ascanio

  • Hero Member
  • *****
  • Posts: 569
    • View Profile
    • http://www.surfourspace.net
Re: Image on mouseover
« Reply #1 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?

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
Re: Image on mouseover
« Reply #2 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

Offline edwin

  • Full Member
  • ***
  • Posts: 199
    • View Profile
    • http://www.foto-janssen.nl
Re: Image on mouseover
« Reply #3 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

Offline boatman9999

  • Jr. Member
  • **
  • Posts: 50
    • View Profile
Re: Image on mouseover
« Reply #4 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!


Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: Image on mouseover
« Reply #5 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
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
Re: Image on mouseover
« Reply #6 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