Img Tag Attributes Not Being Set (Namely .width and .height)

N

Nonee

Ok, I am still having problems with this... I am dynamically creating
a window based on the size of an image. I load the img.src but that
does not set the img's width and height attributes. I figured it was
because the page is created dynamically so it creates the page before
the image is loaded. Because the image width etc's aren't set, it
creates the window height and width as 0 + myOffset. I tried to do a
window.resize with JS but that didn't work either. (Create the page,
then onload call a func to resize the window). Any other ideas?
Remember, the image and the window are both dynamic and the images are
of varying sizes, so I cannot pre-set the width and height. I tried
that too.... Urrrrg... Please help...

Thanks,

Josh
 
M

mbstevens

Nonee said:
Remember, the image and the window are both dynamic and the images are
of varying sizes, so I cannot pre-set the width and height.
Click to expand...

Create an associative table with the names/sizes of the available
images. Do a look-up just before creating the window. (I don't
suppose I can convince you that pop up windows are just a bad idea?)

Always: Please post the page for us to look at.
I'm having to just guess you're talking about javascript.
 
M

mbstevens

Or, if you're saying that the image is actually being created on the
fly, then you (probably) have server side privileges, and you should be
able to determine the width and height in software before you create the
popup.
 
N

Nonee

Bascially, the page I am creating has a list of products. The new
popup window is a larger size of the image. There is approx 100
different images so I could do a lookup table but there has to be a
better way. Is there any way to force the browser to load the image
and set the img attributes?
 
H

hywel.jenkins

Bascially, the page I am creating has a list of products. The new
popup window is a larger size of the image. There is approx 100
different images so I could do a lookup table but there has to be a
better way. Is there any way to force the browser to load the image
and set the img attributes?
Click to expand...

Show us the code! Show us the code!

You can more than likely use server-side code to determine the size of
the image just before you write out the link that the user has to click
to open the window. You can then use those dimensions to populate the
window.open function.

Still, without the code, people might continue to guess the solution to
your problem, but they'll eventually give up because they'll realise
that you're not really listening.
 
N

Nonee

Ok, here is the code. I also included a func that tries to fix the
window after the window is fully loaded. The func is called but it
still doesn't work. Btw, the a = and x = is to get the image name
from the thumbnail name... aka tnImage to Image.

PLEASE HELP..... heh.

Thanks...

var anImage = new Image();

function BlowUp(filename)
{
// var filename;
var a,x;
var winHeight, winWidth;

a = filename.indexOf('thumbs');
x = filename.substring(0,a) +
filename.substring(a+9,filename.length);
// ../images/urns/thumbs/tnblack engraved.jpg
anImage.src = x;

// Get Name of Item
a = filename.indexOf('tn');
x = filename.indexOf('.jpg');
name = filename.substring(a+2,x);


winHeight = anImage.height+150;
winWidth = anImage.width+100;

// To center the image (and page) on the screen
var winl = (screen.width - winWidth) / 2;
var wint = (screen.height - winHeight) / 2;
var winproperty =
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,width='+winWidth+',height='+winHeight+',top='+wint+',left='+winl+',resizable=0';

var win = window.open("", "win", winproperty); // a window
object
var generator = win.document;
var root = "";

generator.open("text/html", "replace");

generator.write('<html>');
generator.write('<head>');
generator.write('<title>'+name+'</title>');
generator.write('<link href="'+root+'/css/style.css"
rel="stylesheet" type="text/css">');
generator.write('<link href="'+root+'/css/format.css"
rel="stylesheet" type="text/css">');
generator.write('<script>');
generator.write(' function FixWindow()');
generator.write(' {');
generator.write(' var winHeight =
document.images[0].height+200;');
generator.write(' var winWidth =
document.images[0].width+100;');
generator.write(' var winl = (screen.width -
winWidth) / 2;');
generator.write(' var wint = (screen.height -
winHeight) / 2;');
generator.write(' window.moveTo (winl,wint);');
generator.write(' window.resizeTo
(winWidth,winHeight); ');
generator.write(' }');
generator.write('</script>');
generator.write('</head>');
generator.write('<body onLoad="focus(); FixWindow();"
leftmargin="0" topmargin="0">');
generator.write('<table width="100%" border="0">');
generator.write(' <tr>');
generator.write(' <td><p>&nbsp;</p><div
align="center"><span class="Header"><strong>'+name+'</strong><br><img
src=" ' + anImage.src + '" alt="Close this window to return"
border="1"></div></td>');
generator.write(' </tr>');
generator.write(' <tr>');
generator.write(' <td><div align="center"><font
color="#000000">Close This Window To
Return.</span></font></div></td>');
generator.write(' </tr>');
generator.write('</table>');
generator.write('</body>');
generator.write('</html>');

generator.close();

}
 
M

mbstevens

Nonee said:
Ok, here is the code. I also included a func that tries to fix the
window after the window is fully loaded. The func is called but it
still doesn't work. Btw, the a = and x = is to get the image name
from the thumbnail name... aka tnImage to Image.
Click to expand...
var win = window.open("", "win", winproperty); // a window
object
var generator = win.document;
var root = "";
Click to expand...
.................PAGE OF CODE......................
generator.write('</html>');

generator.close();

}
Click to expand...

That whole page of "generator...." code seems excessive for a pop up
enlargement of an image. Here's an example of a more reasonable
thumbnail click-through code:

<a href="images/11.jpg"
onclick="window.open('images/11.jpg','flowerwin','width=500,
height=406'); return false;">
<img src="images/1.jpg" width="50" height="41" alt="flower" />
<br />(Image opens in a new window.)<br /></a>

I'm trying to ignore the fact that pop ups are generally a bad idea
because they are inaccessible. Anyway, from the above code, you see
that you need just the images height and width to make the window pop up
the right size.

If you really _must_ have all that code from the "generator..." section,
consider a normal link to an (X)HTML page, or generate a page from a
server side program.
http://www.mbstevens.com/howtothumb/
may help.

Now, how do you get that width and height? Just as an example, you can
use the Perl module Image::Size available at cpan.org:
In a Perl script you would use:

........
use Image::Size;
.........
my ($im_w, $im_h, $im_type) = imgsize('example.jpg");
.........


....and you have them.
 
N

Nonee

Just showing the picture is plain though. As you can see from the
code, it also has a title and a caption (close to go back or
whatever). I can do it via php though. I never thought to go that
direction. Hmmm.... I will have to work on that. I do hate js and
try not to use it when I can.

Question: What do you mean popups are inaccessible? You mean for
accessibility features or do you mean popup blockers?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SVG not full width and space 0
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0
Firefox ignores img height / width? 11
Stuck with html and css 25
width, height in IMG tag 0
Css not being loaded 1
Inline Styles - Img Height, Width, Align? 9
Unsetting an IMG height/width 5

Members online

No members online now.
Total: 40 (members: 2, guests: 38)
Robots: 457

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top