G
Guest
I am trying to have a larger version of a picture appear when someone rolls
the mouse over it. How do I do this???
the mouse over it. How do I do this???
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
T
Trevor L.
chanistuff said:I am trying to have a larger version of a picture appear when someone
rolls the mouse over it. How do I do this???
Hmm!
Where do you want the larger image to appear?
If there is already other text or whatever on the page, it may overwrite it.
Here is some code which places the larger image in a specific place on the
page (and removes it on mouseout).
It uses two FP functions. There may be simpler ways to do this, but maybe
not so robust.
It references an image named images/1.jpg which is displayed fullsize in the
other box when the smaller image is moused over.
The size of the smaller image is set at 100*100, which can be altered.
If this isn't quite what you want, it can be modified a bit
Here is the code.
<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>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>
M
Murray
Use FP's Image Swap behavior?
Rollover imageA and swap imageB to imageC.
Rollover imageA and swap imageB to imageC.
D
Dan G
Keep in mind that the browser will still download the larger image when the
page loads, whether the visitor views it or not. Thumbnails avoid this
problem.
page loads, whether the visitor views it or not. Thumbnails avoid this
problem.
Trevor L. said:chanistuff said:I am trying to have a larger version of a picture appear when someone
rolls the mouse over it. How do I do this???
Hmm!
Where do you want the larger image to appear?
If there is already other text or whatever on the page, it may overwrite it.
Here is some code which places the larger image in a specific place on the
page (and removes it on mouseout).
It uses two FP functions. There may be simpler ways to do this, but maybe
not so robust.
It references an image named images/1.jpg which is displayed fullsize in the
other box when the smaller image is moused over.
The size of the smaller image is set at 100*100, which can be altered.
If this isn't quite what you want, it can be modified a bit
Here is the code.
<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>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>
M
Murray
Actually, what avoids the problem is dynamically writing the requested image
to the page, as with the change properties behavior. See how I have done it
here -
http://murraytestsite.com/fp/fp-slideshow.html
The page doesn't take the hit on the weight of the larger image until it is
requested from the mouseover.
--
Murray
--------------
MVP FrontPage
to the page, as with the change properties behavior. See how I have done it
here -
http://murraytestsite.com/fp/fp-slideshow.html
The page doesn't take the hit on the weight of the larger image until it is
requested from the mouseover.
--
Murray
--------------
MVP FrontPage
Dan G said:Keep in mind that the browser will still download the larger image when
the
page loads, whether the visitor views it or not. Thumbnails avoid this
problem.
Trevor L. said:chanistuff said:I am trying to have a larger version of a picture appear when someone
rolls the mouse over it. How do I do this???
Hmm!
Where do you want the larger image to appear?
If there is already other text or whatever on the page, it may overwrite it.
Here is some code which places the larger image in a specific place on
the
page (and removes it on mouseout).
It uses two FP functions. There may be simpler ways to do this, but maybe
not so robust.
It references an image named images/1.jpg which is displayed fullsize in the
other box when the smaller image is moused over.
The size of the smaller image is set at 100*100, which can be altered.
If this isn't quite what you want, it can be modified a bit
Here is the code.
<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>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>
M
Murray
That would be the set layer text behavior....
--
Murray
--------------
MVP FrontPage
--
Murray
--------------
MVP FrontPage
Murray said:Actually, what avoids the problem is dynamically writing the requested
image to the page, as with the change properties behavior. See how I have
done it here -
http://murraytestsite.com/fp/fp-slideshow.html
The page doesn't take the hit on the weight of the larger image until it
is requested from the mouseover.
--
Murray
--------------
MVP FrontPage
Dan G said:Keep in mind that the browser will still download the larger image when
the
page loads, whether the visitor views it or not. Thumbnails avoid this
problem.
Trevor L. said:chanistuff wrote:
I am trying to have a larger version of a picture appear when someone
rolls the mouse over it. How do I do this???
Hmm!
Where do you want the larger image to appear?
If there is already other text or whatever on the page, it may overwrite it.
Here is some code which places the larger image in a specific place on
the
page (and removes it on mouseout).
It uses two FP functions. There may be simpler ways to do this, but
maybe
not so robust.
It references an image named images/1.jpg which is displayed fullsize in the
other box when the smaller image is moused over.
The size of the smaller image is set at 100*100, which can be altered.
If this isn't quite what you want, it can be modified a bit
Here is the code.
<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>
<p><a href=""
onmouseover="FP_setLayerText('layer1',
'<img src = "images/1.jpg">')"
onmouseout="FP_setLayerText('layer1','Watch this space')">
<img border="0" src="images/1.jpg" width="100" height="100">
</a></p>
</body>
</html>
T
Trevor L.
Murray said:Actually, what avoids the problem is dynamically writing the
requested image to the page, as with the change properties behavior. See
how I have done it here -
http://murraytestsite.com/fp/fp-slideshow.html
The page doesn't take the hit on the weight of the larger image until
it is requested from the mouseover.
Murray,
What I posted was copied from your site, so the same applies to that code,
doesn't it?
But I wonder why?
Is it because the images down the side of the page are in fact *different*
images which are smaller ?
Ah yes, I now notice I used the same image in both places (smacks wrist)
M
Murray
Not too hard, I hope.
But I apologize for not noticing the similarity!
But I apologize for not noticing the similarity!
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.