Solved

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

Posted on 1998-09-01
7
183 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

717 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