Hovering over images

TheMSsForum.com: The Microsoft Software Forum

I have several thumbnail images, each in it's own table cell. I want to be
able to hover over the thumbnail and have the fullsize image display. I'm
able to do this within the cell, but then the cell and table become distorted
- is there someway to have the fullsize image pop-up in a new window when I
hover over the thumbnail?
Top

RE: Hovering over images by DebJo

DebJo
Thu Aug 10 15:35:02 CDT 2006

I'm wanting to know the same thing. I've seen some websites with the
pictures in thumbnail and then when you mouseover it appears in the middle
frame. Let me know if you find out how to do this.

"DMS" wrote:

> I have several thumbnail images, each in it's own table cell. I want to be
> able to hover over the thumbnail and have the fullsize image display. I'm
> able to do this within the cell, but then the cell and table become distorted
> - is there someway to have the fullsize image pop-up in a new window when I
> hover over the thumbnail?
Top

Re: Hovering over images by Trevor

Trevor
Thu Aug 10 18:50:32 CDT 2006

DebJo wrote:
> I'm wanting to know the same thing. I've seen some websites with the
> pictures in thumbnail and then when you mouseover it appears in the
> middle frame. Let me know if you find out how to do this.
>
> "DMS" wrote:
>
>> I have several thumbnail images, each in it's own table cell. I
>> want to be able to hover over the thumbnail and have the fullsize
>> image display. I'm able to do this within the cell, but then the
>> cell and table become distorted - is there someway to have the
>> fullsize image pop-up in a new window when I hover over the
>> thumbnail?

Here is some code (courtesy of Murray) which does just that. The references are in <p> tags, not cells but that it easy to alter.
Since the code refers to images on my website, it actually works without change. You need to change the images referenced.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slideshow Demo</title>
<script language="JavaScript">
function FP_setLayerText(id,txt)
{//v1.0
var el = FP_getObjectByID(id)
if(el.innerHTML)
el.innerHTML = txt
}

function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document

if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]

if(el)
return el

if(o.id==id || o.name==id)
return o

if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }

f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
</script>
</head>

<body>
<div id="layer1"
style="position: absolute; width: 400px; height: 400px;
z-index: 1; left: 200px; top: 30px;
font-family: trebuchet,verdana,arial,sans-serif;
font-size: 14px; font-color: black; background: #FFC;
border: 8px green inset; padding: 15px;">
Watch this space
</div>

<!-- <a > tags were onclick= -->
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg" width="45" height="60">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg" width="60" height="45">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg&quot;&gt;')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg" width="60" height="40">
</a></p>

</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/


Top

Re: Hovering over images by DebJo

DebJo
Fri Aug 11 08:09:01 CDT 2006

After I posted this I found where you and someone else worked on this.
Thanks! It helped tremendously.
Deb

"Trevor L." wrote:

> DebJo wrote:
> > I'm wanting to know the same thing. I've seen some websites with the
> > pictures in thumbnail and then when you mouseover it appears in the
> > middle frame. Let me know if you find out how to do this.
> >
> > "DMS" wrote:
> >
> >> I have several thumbnail images, each in it's own table cell. I
> >> want to be able to hover over the thumbnail and have the fullsize
> >> image display. I'm able to do this within the cell, but then the
> >> cell and table become distorted - is there someway to have the
> >> fullsize image pop-up in a new window when I hover over the
> >> thumbnail?
>
> Here is some code (courtesy of Murray) which does just that. The references are in <p> tags, not cells but that it easy to alter.
> Since the code refers to images on my website, it actually works without change. You need to change the images referenced.
>
> <html>
>
> <head>
> <meta http-equiv="Content-Language" content="en-us">
> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
> <title>Slideshow Demo</title>
> <script language="JavaScript">
> function FP_setLayerText(id,txt)
> {//v1.0
> var el = FP_getObjectByID(id)
> if(el.innerHTML)
> el.innerHTML = txt
> }
>
> function FP_getObjectByID(id,o)
> {// v1.0
> var c, el, els, f, m, n
> if(!o) o = document
>
> if(o.getElementById)
> el = o.getElementById(id)
> else if(o.layers)
> c = o.layers
> else if(o.all)
> el = o.all[id]
>
> if(el)
> return el
>
> if(o.id==id || o.name==id)
> return o
>
> if(o.childNodes)
> c = o.childNodes
> if(c)
> for(n = 0; n < c.length; n++)
> { el = FP_getObjectByID(id,c[n])
> if(el)
> return el }
>
> f = o.forms
> if(f)
> for(n = 0; n < f.length; n++)
> { els = f[n].elements
> for(m = 0; m < els.length; m++)
> { el = FP_getObjectByID(id,els[n])
> if(el)
> return el }
> }
> return null
> }
> </script>
> </head>
>
> <body>
> <div id="layer1"
> style="position: absolute; width: 400px; height: 400px;
> z-index: 1; left: 200px; top: 30px;
> font-family: trebuchet,verdana,arial,sans-serif;
> font-size: 14px; font-color: black; background: #FFC;
> border: 8px green inset; padding: 15px;">
> Watch this space
> </div>
>
> <!-- <a > tags were onclick= -->
> <p><a href=""
> onmouseover="FP_setLayerText('layer1',
> '<img src = "http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg">')"
> onmouseout="FP_setLayerText('layer1','Watch this space')">
> <img border="0" src="http://tandcl.homemail.com.au/images/06-02-14-michelle.jpg" width="45" height="60">
> </a></p>
>
> <p><a href=""
> onmouseover="FP_setLayerText('layer1',
> '<img src = "http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg">')"
> onmouseout="FP_setLayerText('layer1','Watch this space')">
> <img border="0" src="http://tandcl.homemail.com.au/images/Trevor and Carole 05-12-13.jpg" width="60" height="45">
> </a></p>
>
> <p><a href=""
> onmouseover="FP_setLayerText('layer1',
> '<img src = "http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg">')"
> onmouseout="FP_setLayerText('layer1','Watch this space')">
> <img border="0" src="http://tandcl.homemail.com.au/images/04-11-21-2-bryans-picture.jpg" width="60" height="40">
> </a></p>
>
> </body>
> </html>
>
> --
> Cheers,
> Trevor L.
> [ Microsoft MVP - FrontPage ]
> MVPS Website: http://trevorl.mvps.org/
>
>
>
Top