mouse over image to show bigger image on the same page

S

SasssieCJ

How do you add a java script to a webpage that when you hoover your mouse
over a small image it shows that image bigger next to that small image? I
know how to make a bigger image pop up in a new window but I need to know how
to make it show up on that same page. Can this be done in frontpage?

Thanx
 
T

Trevor L.

SasssieCJ said:
How do you add a java script to a webpage that when you hoover your
mouse over a small image it shows that image bigger next to that
small image? I know how to make a bigger image pop up in a new window
but I need to know how to make it show up on that same page. Can this
be done in frontpage?

Thanx

Here is some code writen by Murray from this NG, which will display a larger
image when one of several smaller images is moused over.

Originally the "onmouseover"s were "onclick"s. I just changed it to work the
way you want. You don't need 3 images - one would do.

<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;images/1.jpg&quot;&gt;')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>

</body>

</html>
 
D

DianaH

Hey .. I just peeked. That's nice. Is there a way to make the images
bigger on mouseover, (without losing quality, that is). This would work for
a project I'm working on.
Diana

Trevor L. said:
SasssieCJ said:
How do you add a java script to a webpage that when you hoover your
mouse over a small image it shows that image bigger next to that
small image? I know how to make a bigger image pop up in a new window
but I need to know how to make it show up on that same page. Can this
be done in frontpage?

Thanx

Here is some code writen by Murray from this NG, which will display a
larger image when one of several smaller images is moused over.

Originally the "onmouseover"s were "onclick"s. I just changed it to work
the way you want. You don't need 3 images - one would do.

<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;images/1.jpg&quot;&gt;')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/2.jpg&quot;&gt;')">
<img border="0" src="images/2.jpg" width="100" height="100">
</a></p>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src = &quot;images/3.jpg&quot;&gt;')">
<img border="0" src="images/3.jpg" width="100" height="100">
</a></p>

</body>

</html>
 
T

Trevor L.

DianaH said:
Hey .. I just peeked. That's nice. Is there a way to make the images
bigger on mouseover, (without losing quality, that is). This would
work for a project I'm working on.
Diana

Hi Diana,

As far as I can tell, the images open full size. So whatever size they are
is what you will see. (WYSIWYG)

But it's dinner time (AEST)

I'll check again later to see whether I am correct or whether you have any
other query. (Maybe tomorrow)
 
D

DianaH

I'm not sure how I'd do that, I'd have to use two different images for that
effect. When you insert an image in Frontpage and downsize it, then save,
it overwrites the original ... making it smaller as well (at least that's
been my experience). Unless it's possible to have it point to a different
version of the image. Is that an option.
Thanks for your help.
 
M

Murray

I'm not sure how I'd do that, I'd have to use two different images for
that effect.

That's the way to do it. You cannot allow the browser to resize your
images.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top