Clip Image inside div

[MarkusJNZ]

Hi, I have a DIV in my webpage called largeImage declared as such

<div id="largeImage" style="width:360px; height: 238px;" />

When someone does a mouseover on a thumbnail I am showing the big
image using the following code

function showImage(imageName)
{
document.getElementById('largeImage').innerHTML = '<img src="./
_listingImages/' + imageName + '" style="width:360px;height:238px;" /

';

}

My problem is that sometimes the large image can be bigger then the
original DIV so I want to cut off the excess so to speak so that the
large image is not bigger than the original div.

Any help appreciated
Thanks in advance
Markus

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

When someone does a mouseover on a thumbnail I am showing the big
image using the following code

function showImage(imageName)

I hope you have some fallback, like a link, for users who have decided (or
whose superiors have decided) to switch of JavaScript execution.

{
document.getElementById('largeImage').innerHTML = '<img src="./
_listingImages/' + imageName + '" style="width:360px;height:238px;" /
}

Why invalid markup? There's never an acceptable reason to omit the alt
attribute.

Why do you use innerHTML instead of simply changing the value of the
element's src attribute (and possibly the alt attribute) in the code?

My problem is that sometimes the large image can be bigger then the
original DIV so I want to cut off the excess so to speak so that the
large image is not bigger than the original div.

This part looks easy, though I might miss something since the answer looks
too obvious (but answers often are): add the following into your style
sheet:

#largeImage { overflow: hidden; }