image sizing

[Sothpaw]

the JavaScript is already set up by our old Webmaster who got the JS code from a free ware site and it looks like this.

//Specify image paths and optional link (set link to "" for no link):
var gag=new Array()
gag[1]=["001.jpg", ""]
gag[2]=["002.jpg", ""]
etc.

and my HTML looks like:
</div>
<div id="dynloadarea" class="dynloadarea">
<img src="001.jpg" border="0" width="100%">
</div>

i have CSS to describe the class but the image sizes rolled over image sizes don't size to my CSS requirements. i want the width to show up with a specific size and not the original photo size. i'm thinking i need to describe the image size in JavaScript but i can't find any tutorials about image sizing.

[lexipixel]

Are you looking to resize the image or just scale it fit for presentation?

In case that isn't clear: What I am asking is that .JPG images can be "resized" for presentation just by using the HEIGHT= and WIDTH= paramters on the IMG tag, e.g.-

Image: TEST600x400.JPG (actaul size 600w x 400h)

<img src="test600x400.jpg" width="300" height="200">

With that tag the image will appear at 300x200 --- but the underlying image will be the original....

If you want to actually resample the image file and transmit a smaller size, (file size on disk and display dimmensions), you'll need to look into "Thomas Boutell's GD graphics library" or "ImageMagick", or other server side scripting solution to manipulate the original file.

[Sothpaw]

i know how to modify original image files.
and i know how to manipulate image size in HTML.
but i need to manipulate it in JS and the code in my previous message shows what the JS is supposed to look like and i'm wondering where and how i describe the desired image size.

[lexipixel]

Why do you use "100%" as a width for your IMG tag?

<img src="001.jpg" border="0" width="100%">

[lexipixel]

Also, I see you basically asked the same question the same way in this thread: [webmasterworld.com...]

... and in this one:

[webmasterworld.com...]

It's better if you follow through a thread once you start one --- WebmasterWorld isn't like CL where people try to "bump" their posting to the top of the list.

[Sothpaw]

oh come on.
i wasn't getting the correct responses to those threads.
and why are we discussing my width=100%...?
i want the width to fit exactly inside a specific div that i have set up in CSS so i can locate it specifically on my page.
the first image is referenced from html so it needs a width.
the others after the rollover are referenced from JS so i need to know how to control the width in JS.
pretty simple question. i don't know why everyone keeps beating around the bush. is it possible or not. no JS tutorial i've found has yet showed me how to manipulate image sizes

[Trace]

I can't quite make any sense of what you're trying to ask, but here's a little snippet to show you how to affect the size of an image;

<script type="text/javascript">
function makeBigger(){
document.getElementById('myImage').style.width = '100px';
document.getElementById('myImage').style.height = '100px';
}
function makeSmaller(){
document.getElementById('myImage').style.width = '50px';
document.getElementById('myImage').style.height = '50px';
}
</script>

<img src="something.gif" style="width:50px; height:50px;" id="myImage" onmouseover="makeBigger()" onmouseout="makeSmaller()" />

[Sothpaw]

ok... maybe giving you the entire JS code will help you understand.

<script type="text/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

var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

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])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}}
</script>

now how do i get those 3 images to display with a different size.
this is soooo frustrating. thanks for all your help thus far.

[lexipixel]

It looks like you could stuff the height= and width= values into the function returnimgcode. (Using the method Trace suggested or something like it).

There is a var/value "loadarea" referenced in your JS that may effect the outcome -- but since you don't post any HTML or CSS, I have no idea what it does.

You can get clearer answers by posting simple, but complete examples, e.g.-

<html>
<head>
<script type="text/javascript" language="javascript">
.
.
.
</script>
<style type="text/css">
.
.
.
</style>
</head>
<body>
.
.
.
</body>
</html>

[Sothpaw]

i never posted the entire code because i figured this is where i would get JS specific help... guess posting all of it from the start would have helped. thanks so far.

<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

var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

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])
if (imgobj.filters && window.createPopup)
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>
<div class="icon">
<a onmouseover="modifyimage('dynloadarea', 1)" href="#"><img src="001.jpg" border="0" width="100%"></a>
<a onmouseover="modifyimage('dynloadarea', 2)" href="#"><img src="002.jpg" border="0" width="100%"></a>
<a onmouseover="modifyimage('dynloadarea', 3)" href="#"><img src="003.jpg" border="0" width="100%"></a>
<br>
</div>
<div id="dynloadarea" class="dynloadarea">
<img src="001.jpg" border="0" width="100%">
</div>
<p>this is where a paragraph of text will appear</P>
</body>
</html>

once again what i am trying to make happen would be that the second and third image also scale to the given percentage width of the DIV areas.

[lexipixel]

You have (2) divs.... both are set to 70% width... that's 140% total.

You have nothing in the code to set any size for an image (other than 100%).

The code seems like overkill for what you're trying to do. The filters, preloader, pop-up, etc.. make it difficult to get to the root of the problem.

With no image files, and no known sizes, it's still hard to guess what you are hoping it will function and what it will look like in the end.

[Sothpaw]

popups...? what popups....? i don't know JavaScript... this is a pre-existing code that our previous webmaster grabbed from some free ware site.
i'de give you a URL to my site so you could see what it looks like and get an idea what i want... but thats not allowed.

[Sothpaw]

the Div.icon is a different frame from the Div.dynloadarea.
i created the second one because it doesn't seem to even remotely work with a div inside another div. one is above the other.
why don't you try the code with any picture of yours renamed and get an idea from that... then you will know what i'm looking for.
i want the image size to change with different size web browsers.

[Marshall]

Why don't you just you CSS?

#div img {
width: 100px; /* or whatever you need it to be */
height: auto;
border: 0px; /* if you are usiing XHTML, border="whatever" is not an acceptable attribute */
}

It works fine.

Marshall

[edited by: Marshall at 12:46 pm (utc) on July 3, 2007]

[lexipixel]

Sothpaw:
popups...? what popups....? i don't know JavaScript...
this is a pre-existing code that our previous webmaster grabbed from some free ware site.

if (imgobj.filters && window.createPopup

Sothpaw:
the Div.icon is a different frame from the Div.dynloadarea.
i created the second one because it doesn't seem to even remotely work with a div inside another div. one is above the other.

You might want to read up on javascript (somewhere w3schools.com is a good place to start). You can teach yourself an amazing amount about JS in a couple hours. Looking at the (very simple) examples there will show you how to create and test a simple function -- which you can then build on.

Sothpaw:
why don't you try the code with any picture of yours renamed and get an idea from that... then you will know what i'm looking for. i want the image size to change with different size web browsers.

Google: javascript image scaling

You'll find tons of good code examples. (in 1 minute I found a DevX one which uses window size as factor, one from webreference is more involved, but sounds like where you want to take your site).