Behaviors Swap Image Problem

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hi, Can you pls help

I have created a page with a central large size image that changes
accordingly when the mouse rolls over a number of smaller images. I have
approx 9 large images of various sizes involved.

Because the images are different sizes, I unchecked the box 'Specify Size'
in picture properties of the original image.

This works well when I press F12 in Frontpage - it works as I would expect -
the page is adjusted according to the size of the new large image.

However, when I upload the page and run it from my browser each replacement
large image is forced (distorted) to be the same size as the original image -
I am confused and 'stuck'

Can you advise how I can overcome this please?
 
Resize your images before using them. Use an third party image editor. Try
IrFanview - it's a freebie and is excellent for resizing, optimizing,
converting, renaming and batch stuff as well as a zillion other tasks.

Resize outside of FP, then import the images into FP then do whatever.



| Hi, Can you pls help
|
| I have created a page with a central large size image that changes
| accordingly when the mouse rolls over a number of smaller images. I have
| approx 9 large images of various sizes involved.
|
| Because the images are different sizes, I unchecked the box 'Specify Size'
| in picture properties of the original image.
|
| This works well when I press F12 in Frontpage - it works as I would
expect -
| the page is adjusted according to the size of the new large image.
|
| However, when I upload the page and run it from my browser each
replacement
| large image is forced (distorted) to be the same size as the original
image -
| I am confused and 'stuck'
|
| Can you advise how I can overcome this please?
| --
| Regards
| Bob
 
Hi Rob
Thanks for the post - however, the images have a different width to length
ration which makes things very difficult - why would a no size setting work
locally but not on the web?
 
If you want them to match you'll have to do some cropping & fudging to get
the aspect ratios the same or it will never look right. You know...like
plastic surgery; a nip here a tuck there :-)))




| Hi Rob
| Thanks for the post - however, the images have a different width to length
| ration which makes things very difficult - why would a no size setting
work
| locally but not on the web?
| --
| Regards
| Bob
|
|
| "Rob Giordano (Crash)" wrote:
|
| > Resize your images before using them. Use an third party image editor.
Try
| > IrFanview - it's a freebie and is excellent for resizing, optimizing,
| > converting, renaming and batch stuff as well as a zillion other tasks.
| >
| > Resize outside of FP, then import the images into FP then do whatever.
| >
| >
| >
| > | > | Hi, Can you pls help
| > |
| > | I have created a page with a central large size image that changes
| > | accordingly when the mouse rolls over a number of smaller images. I
have
| > | approx 9 large images of various sizes involved.
| > |
| > | Because the images are different sizes, I unchecked the box 'Specify
Size'
| > | in picture properties of the original image.
| > |
| > | This works well when I press F12 in Frontpage - it works as I would
| > expect -
| > | the page is adjusted according to the size of the new large image.
| > |
| > | However, when I upload the page and run it from my browser each
| > replacement
| > | large image is forced (distorted) to be the same size as the original
| > image -
| > | I am confused and 'stuck'
| > |
| > | Can you advise how I can overcome this please?
| > | --
| > | Regards
| > | Bob
| >
| >
| >
 
Bob said:
Hi, Can you pls help

I have created a page with a central large size image that changes
accordingly when the mouse rolls over a number of smaller images. I
have approx 9 large images of various sizes involved.

Because the images are different sizes, I unchecked the box 'Specify
Size' in picture properties of the original image.

This works well when I press F12 in Frontpage - it works as I would
expect - the page is adjusted according to the size of the new large
image.

However, when I upload the page and run it from my browser each
replacement large image is forced (distorted) to be the same size as
the original image - I am confused and 'stuck'

Can you advise how I can overcome this please?
Click to expand...

Hmm, I tried this code (courtesy of Murray) and the last image
(images/trevor-and-carole.jpg) is a different size - 600*400. The others are
386*386.
It worked perfectly

It may mean some cutting and pasting but it is tested and it works, so good
luck.

<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;">
<!-- <img src = "images/1.jpg";> -->
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>

<p><a href=""
onmouseover="FP_setLayerText('layer1',
'&lt;img src =
&quot;images/trevor-and-carole.jpg&quot;&gt;')">New Picture
</a></p>

</body>

</html>
 
Back
Top