image scalling

@SothpawMagnusJul 03.2007

if i’m not allowed to post URL’s here than ignore my link but i feel it will help you understand my problem. ~~[url]~~http://foxarch.com/portfolio/Restaurants/00056_DairyQueen/index.htm[/url]
the main image on the right hand side of the page has a fixed size because my JavaScript doesn’t change the picture sizes at all. it’s a freeware code that our previous webmaster grabbed and i can’t figure out where to edit it to incorporate image size.
the icons above the image when rolled over change the big image below.
now here is my code… hopefully i can get an idea of where i can insert a line of code to change the image size to be whatever i want it to be. i would like to use percentage so that whatever window size a browser is using they will see the whole image.

[code=php]<html> <head> <script type=”text/javascript” language=”javascript”> var dynimages=new Array() dynimages[1]=[“001.jpg”, “”] dynimages[2]=[“002.jpg”, “”] dynimages[3]=[“003.jpg”, “”]

var preloadimg=”yes”

var optlinktarget=””

var imgborderwidth=0

if (preloadimg==”yes”){ for (x=0; x<dynimages.length; x++){ var myimage=new Image() myimage.src=dynimages[x][0] } } function returnimgcode(theimg){ var imghtml=”” if (theimg[1]!=””) imghtml='<a href=”‘+theimg[1]+'” target=”‘+optlinktarget+'”>’ imghtml+='<img src=”‘+theimg[0]+'” border=”‘+imgborderwidth+'”>’ if (theimg[1]!=””) imghtml+='</a>’ return imghtml } function modifyimage(loadarea, imgindex){ if (document.getElementById){ var imgobj=document.getElementById(loadarea) if (imgobj.filters && window.createPopup){ imgobj.style.filter=filterstring imgobj.filters[0].Apply() } imgobj.innerHTML=returnimgcode(dynimages[imgindex]) imgobj.filters[0].Play() return false}} </script> <style type=”text/css”> div.icon {float: right; width:70%; background: #000000} div.dynloadarea {float: right; width:70%; background: #00CC00} </style> </head> <body> <h4>Dairy Queen </h4> <div class=”icon”> <a onmouseover=”modifyimage(‘dynloadarea’, 1)” href=”#”><img title=”Rendering” src=”001_thumb.jpg” border=”0″ width=”25pt”></a> <a onmouseover=”modifyimage(‘dynloadarea’, 2)” href=”#”><img title=”Hackettstown Before Construction” src=”002_thumb.jpg” border=”0″ width=”25pt”></a> <a onmouseover=”modifyimage(‘dynloadarea’, 3)” href=”#”><img title=”Model Left Side” src=”003_thumb.jpg” border=”0″ width=”25pt”></a> </div> <div id=”dynloadarea” class=”dynloadarea”> <img src=”001.jpg” border=”0″ width=”100%”> </div> <p>this is where a paragraph of text would appea</p> </body> </html>[/code]

to post a comment

JavaScript

14 Comments(s) _↴

@toicontienJul 03.2007 — #How about something like this:

/*
 dynimages[i][0]: Image source
 dynimages[i][1]: Image link URL
 dynimages[i][2]: Image width
 dynimages[i][3]: Image height
 dynimages[i][4]: Image node reference
 */
 var dynimages = [
 ["001.jpg", "", 0, 0, null],
 ["002.jpg", "", 0, 0, null],
 ["003.jpg", "", 0, 0, null]
 ];
 
 var preloadimg = "yes";
 var optlinktarget = "";
 var imgborderwidth = 0;
 var myimage;
 
 if (preloadimg=="yes") {
 for (x=0; x&lt;dynimages.length; x++) {
 dynimage[x][4] = new Image();
 dynimage[x][4].src = dynimages[x][0];
 }
 }
 
 
 function getImageDims(i) {
 var width = 2, height = 3, node = 4;
 dynimages[i][width] = dynimages[i][node].scrollWidth;
 dynimages[i][height] = dynimages[i][node].scrollHeight;
 }
 
 
 function returnimgcode(i, maxWidth) {
 var imghtml = "";
 var src = 0, url = 1, width = 2, height = 3, node = 4;
 var dimRatio = 1;
 
 if (dynimages[i][width] === 0) {
 getImageDims(i);
 }
 
 dimRatio = maxWidth / dynimages[i][width];
 
 if (dynimages[i][url] !== "") {
 imghtml = '&lt;a href="'+dynimages[i][url]+'" target="'+optlinktarget+'"&gt;';
 }
 imghtml += '&lt;img src="'+dynimages[i][src]+'" width="'+maxWidth+'" height="'+(dynimages[i][height] * dimRatio)+'" border="'+imgborderwidth+'"&gt;';
 if (dynimages[i][url] !== "") {
 imghtml += '&lt;/a&gt;';
 }
 return imghtml;
 }
 
 
 function modifyimage(loadarea, imgindex) {
 if (document.getElementById) {
 var imgobj = document.getElementById(loadarea);
 if (imgobj.filters &amp;&amp; window.createPopup) {
 imgobj.style.filter = filterstring;
 imgobj.filters[0].Apply();
 }
 imgobj.innerHTML = returnimgcode(imgindex, imgobj.scrollWidth);
 imgobj.filters[0].Play();
 return false;
 }
 }

@SothpawMagnusauthorJul 03.2007 — #thanks,

it seems like your code is going in the right direction but i can't tell if it works because the rolled over images aren't responding... meaning... i guess i need to change some HTML now? to respond to the correct rolled over image?

@toicontienJul 05.2007 — #I went back to your site but it doesn't seem to be using the code I gave you. Can you post the full HTML and JavaScript, or update your site?

@SothpawMagnusauthorJul 05.2007 — #http://www.foxarch.com/links/Test1/

i uploaded it. thanks for all your help thus far.

@toicontienJul 05.2007 — #I've got something working. Tested on Firefox and IE-Win and it works. It does require scroll bars at all times though to get the images sized correctly. I ran into a problem before when an image appeared on screen and then created scrollbars. It would size the image, apply the image to the screen, then if vertical scrollbars appeared, it would shrink the window, but not the image. Here's the HTML:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 <title>Portfolio</title>
 <link rel="stylesheet" type="text/css" href="http://www.foxarch.com/FoxArch.css">
 <style type="text/css" media="screen">
 <!--
 #dynloadarea img {
 vertical-align: bottom;
 }
 -->
 </style>
 <script type="text/javascript" src="test.js"></script>
 </head>
 <body>
 
 <h4>Dairy Queen </h4>
 
 <div class="icon">
 <a onmouseover="modifyimage('dynloadarea', 0)" href="#"><img title="Rendering" src="http://www.foxarch.com/links/Test1/001_thumb.jpg" border="0" width="36pt"></a> 
 <a onmouseover="modifyimage('dynloadarea', 1)" href="#"><img title="Hackettstown Before Construction" src="http://www.foxarch.com/links/Test1/002_thumb.jpg" border="0" width="36pt"></a>
 <a onmouseover="modifyimage('dynloadarea', 2)" href="#"><img title="Model Left Side" src="http://www.foxarch.com/links/Test1/003_thumb.jpg" border="0" width="36pt"></a>
 </div>
 
 <div id="dynloadarea" class="dynloadarea">
 <img src="http://www.foxarch.com/links/Test1/001.jpg" border="0" width="100%">
 </div>
 
 <p>In this project an addition was added to the front and right side of the
 building. The existing roof was raised by two feet to create extra height. 
 A drive-thru window was also installed.</p>
 <p>Fox Architectural Design handled both the site plan drawings and the
 Architectural drawings. The design of the building follows the Dairy Queen
 new prototype image.</p>
 <p>Since 1996 we have provided services for the following Diary Queen
 locations in NJ: Mt Olive, Byram, Basking Ridge, Hackettstown, &amp;
 Newfoundland.</p>
 <div style="height: 5px; position: absolute; top: 100%; width: 5px;"></div>
 </body>
 </html>[/code]

And the JavaScript:

var Images = {
 srcURLs: [
 "http://www.foxarch.com/links/Test1/001.jpg",
 "http://www.foxarch.com/links/Test1/002.jpg",
 "http://www.foxarch.com/links/Test1/003.jpg"
 ],
 linkURLs: ["", "", ""],
 widths: [0, 0, 0],
 heights: [0, 0, 0],
 nodes: [null, null, null]
 };
 
 var optlinktarget = "";
 var imgborderwidth = 0;
 var filterstring = '';
 
 // Create the images.
 for (current_img = 0, img_end = Images.srcURLs.length; current_img &lt; img_end; current_img++) {
 Images.nodes[current_img] = document.createElement('img');
 Images.nodes[current_img].src = Images.srcURLs[current_img];
 }
 
 function returnimgcode(i, maxWidth) {
 var imghtml = "";
 
 if (Images.nodes[i]) {
 if (Images.linkURLs[i] !== "") {
 imghtml = '&lt;a href="'+Images.linkURLs[i]+'" target="'+optlinktarget+'"&gt;';
 }
 imghtml += '&lt;img src="'+Images.srcURLs[i]+'" width="'+maxWidth+'" height="'+(maxWidth / Images.nodes[i].width * Images.nodes[i].height)+'" border="'+imgborderwidth+'"&gt;';
 if (Images.linkURLs[i] !== "") {
 imghtml += '&lt;/a&gt;';
 }
 }
 return imghtml;
 }
 
 
 function modifyimage(loadarea, imgindex) {
 var imgobj;
 var imgHTML = '';
 if (document.getElementById) {
 imgobj = document.getElementById(loadarea);
 imgHTML = returnimgcode(imgindex, imgobj.scrollWidth);
 if (imgHTML !== '') {
 imgobj.innerHTML = imgHTML;
 if (imgobj.filters &amp;&amp; filterstring !== '' &amp;&amp; window.createPopup) {
 imgobj.style.filter = filterstring;
 imgobj.filters[0].Apply();
 imgobj.filters[0].Play();
 }
 }
 return false;
 }
 }

@SothpawMagnusauthorJul 05.2007 — #thanks,

it works... not quite the way i completely envisioned... but it still works.

when the first image is on the screen, while the screen is being resized the image changes automatically but my code wouldn't change the other images at all.

your code at least changes those other pictures which is great, but when i resize my screen, the image doesn't resize until i roll over another image.

not bad. it works.

i think i'm going to work on learning JavaScript. wish me luck.

thanks again for your help.

@toicontienJul 05.2007 — #Well actually, all you might need to do is just set the new images' widths to 100%, and when you assign the innerHTML the browser should do the rest.

@SothpawMagnusauthorJul 05.2007 — #i'm assuming you mean to set the new images' widths to 100% in JS right...?

how do i do that?

@toicontienJul 05.2007 — #Find the bit of JavaScript that sets the image width, and make it 100%.

@SothpawMagnusauthorJul 05.2007 — #that's my problem... i don't know JavaScript yet... at least not well enough to find where it modifies my image size.

i have a hunch that it's not modifying my image size at all so it just outputs the standard image so i wouldn't know where or how to insert a width definition.

i will learn JS but i need the image sizing info sooner.

@toicontienJul 05.2007 — #No probs. Change this line ...

imghtml += '&lt;img src="'+Images.srcURLs[i]+'" width="'+maxWidth+'" height="'+(maxWidth / Images.nodes[i].width * Images.nodes[i].height)+'" border="'+imgborderwidth+'"&gt;';

To this ...
imghtml += '<img src="'+Images.srcURLs[i]+'" width="100%" border="'+imgborderwidth+'">';

@SothpawMagnusauthorJul 05.2007 — #thats exactly what i've been looking for all this time... thanks a mil.

and to think if i knew how to read JS i would have been able to see that all along. just by you having me switch that one little line it's as if my eyes can pick out the necessary bits of information now.

thanks to you i'm on my way to learning JS with head start.

@toicontienJul 05.2007 — #Any time. A good place to start on JavaScript is W3Schools.com.

@SothpawMagnusauthorJul 05.2007 — #thankyou, i already used that to nail down my limited understanding of CSS a couple years ago and have been looking at XHTML recently. i took a gander at the JS but was only looking for the image width information but couldn't find it so i turned here.

Also in #JavaScript _↴

Displaying one image on top with the top image always displayed first About form control Plzz Help me asap

Success!

Help @SothpawMagnus spread the word by sharing this article on Twitter...

Tweet This

image scalling

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

image scalling

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴