Solved

Adapt an IMG to a new size after change its SRC?

Posted on 1998-09-01
7
182 Views
Last Modified: 2008-02-26
I used to change the .src of an image to update a picture without reloading the whole page. It works finely in IE4 but not in Netscape if the pictures are not in the same size, in Netscape all the following photos rescaled to the first photo's size. Since the width and height of IMG are read-only, how to solve this problem?

I had to use two different versions for IE and Netscape, they're working at url weddingplus.com.sg/gallery/dayspring/


Hope to hear you solution soon. Thanks.



Chao Zhou
chaozhou@hotmail.com
0
Comment
Question by:175098
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 1837276
One way is to create a layer for each image and show/hide them when the suer clicks on a thunbnail...  This is DHTML though, and only 4+ browsers, and is also a pain in the neck sometimes with browser differences/wars.
Good luck!
I'd also like to know a non layer way but I don't think there is one unless you modify the pictures to all be the same size with just white space padding in whichever direction is needed..
-Josh
0
 

Accepted Solution

by:
mapper earned 100 total points
ID: 1837277
Chao,

Use a white background to mount your images on (then make it transparent) if you choose a background that will be as large as your biggest picture - then you can mount the smaller images on it and (with a transparent background) it should reload properly on either browser - this solution maybe not too technical - but it will not be browser unfriendly.

Let me know how it works out...

best of luck...

mapper
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1837278
mapper, unfortunately the smaller images will then be stretched to the large size in netscape.
-Josh
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Expert Comment

by:mapper
ID: 1837279
Jbirk - not if they are mounted on a background that is the same size

Example:

largest image is 50 x 50 then create a colored background (doesn't matter it will become transparent which should be easy appears Chao is using Frontpage) then drop the smaller images on that background (two different layers) then when the image is saved as a gif the two layers merge into new picture that is 50 X 50 the background is then made transparent - the browser always sees images that are 50 X 50 but the person viewing the web page does not see the background image and the browse will parse the 50 X 50 so the load time should not be very significant...

mapper
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1837280
OK, I see what you are talking about.  This is exactly what I said with this line:
>>unless you modify the pictures to all be the same size with just white space padding in whichever direction is needed..

Same thing, different wording.  You have to modify each and every image this way, AND if you add an image which stretches the maximum horizontal or width then you have to change every image again...  this can be annoying!  But IT IS a solution and WILL work!  So that is a step in the right direction...

-Josh
0
 

Author Comment

by:175098
ID: 1837281
Hi Everybody,


Thanks for your advices and your visits to our web site at weddingplus.com.sg.

Besides the methods your mentioned, is there any other solution just through some programming or scripting trick, or not possible in Netscape currently.

Thanks,

Chao Zhou
0
 

Author Comment

by:175098
ID: 1837282
Hi Everybody,


Thanks for your advices and your visits to our web site at weddingplus.com.sg.

Besides the methods your mentioned, is there any other solution just through some programming or scripting trick, or not possible in Netscape currently.

Thanks,

Chao Zhou
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 44
CSS in HTML 5 54
Debugging Html 8 32
write html in textarea and record it into a database table 3 16
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question