No challenge - just a few questions (imagery) [Archive]

olerag

08-05-2003, 02:18 PM

Here's some source for reference (questions follow):

<html>
<head>
<script type="text/javascript">
var vWidthProportion = 6;
var vHeightProportion = 4;
function zoomImage(vImg,vWidth,vHeight,vXPos,vYPos) {
var vHorizPixels = parseInt(vImg.width);
var vVertPixels = parseInt(vImg.height);
var vImgWidth = parseInt((vWidth/vWidthProportion)*vHorizPixels);
var vImgHeight = parseInt((vHeight/vHeightProportion)*vVertPixels);
var vLeftPos = parseInt(-(vXPos*vHorizPixels)/vWidthProportion);
var vTopPos = parseInt(-(vYPos*vVertPixels)/vHeightProportion);
var vDivHead = document.getElementById('imgHead');
var vDivBody = document.getElementById('imgBody');
vDivHead.style.width = vImgWidth;
vDivHead.style.height = vImgHeight;
vDivBody.style.left = vLeftPos;
vDivBody.style.top = vTopPos;
document.images["imgZoom"].src = vImg.src;
}
function loadImages(vImgSource,vWidth,vHeight,vXPos,vYPos) {
var vImg = new Image();
vImg.src = vImgSource;
document.images["imgNorm"].src = vImg.src;
zoomImage(vImg,vWidth,vHeight,vXPos,vYPos);
}
</script>
</head>
<body onLoad="loadImages('http://myPath/myImage.gif','2.77','2.58','2.9','.99')">
<center>
<b>Image Sample Display</b>
<p>
<img name="imgNorm" border="1" src="">
<br>
<b>Image Title</b>
<p>
<div id=imgHead style="overflow:hidden; border:solid black 1px;">
<div id=imgBody style="position:relative;"><img name="imgZoom" src="">

</div>
</div>
<b>Image Zoom Title</b>
</center>
</body>
<html>

1. Obviously the "myPath/myImage.gif" is bogus but, if I do not wrap this value with single-quotes, JS fails. The other values, however (all numerics), do not need this provision. Why?

2. The "load" of the image - does this speed/slow the process of the page??

3. Although really an HTML question, if the two (2) "divs" are not formatted as shown in the code, the "zoom" does not work correctly. For instance, if a single "div" is used, the "top" and "left" attributes are ignored. Can anyone provide an explanation pertaining to why the "width"/"height" attributes must be assigned in the "imgHead" div and the "top"/"left" must be assigned in the "imgBody" div sections???

4. Really big question - is this the best way to perform a "zoom" of an image or is there a better way??

Thanx for any/all insights.....

Exuro

08-05-2003, 11:13 PM

1. It's because, like you said, they're numbers. When you put quotes around them, you're actually casting them as Strings instead of numbers, but since JavaScript only has one variable type it's pretty forgiving about that type of stuff. But, when you don't put quotes around the "myPath/myImage.gif", it thinks that myPath and myImage are variables, and that you're trying to divide them...

2. It shouldn't really make much of a difference, but the image isn't going to load until after everything else on the page is done.

3. The way the divisions are set up has to do with how the code works for zooming... The first divisions creates a sort of "frame" that the image appears in. The second division controls which part of the image is shown inside the "frame". Anything that doesn't fit inside the frame is hidden, hence the "overflow:hidden;".

4. I don't know of any way to preform a "zoom", and I think this method is very interesting way of doing it... So since there's no other way I know of, I'm gonna have to say that this is your best bet.