SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Location
    Florida
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouseover on images.

    I have three thumbnail images with three enlarged images. The three enlarged images do not have the same dimensions. They have the same height but they do not have the same width.

    When a mouse is over a thumbnail image, it opens an enlarged image.

    It works fine, except when the second enlarged image is open, it uses the same dimensions of the first enlarged image. The enlarged image is distorted.

    And when the third enlarged image is open, it also uses the same dimensions of the first enlarged image. It makes the picture look fat.

    How do you solve this problem? How do you make the enlarged image maintain its true width?

    The website is here:
    http://true-lady.com/lds/l007/l007850326.html.

    Thanks.
    Rajska

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    I looked at it on your site and it seemed to work fine (in both FF and IE).

    Can you detail your problem??

    Also, you should post your code in the thread.

    Off the bat, though, what I can suggest would be to define the width and height with javaScript for each image...


    document[img_name1].style.width = '??';

  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Actually, I just thought of a better idea...

    You could have the images as the background of a div or something... That way you wouldn't have to worry about width and height at all !!



    Again, though, you need to detail your problem because like I said... it seems to work as it is.

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Location
    Florida
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks Shaun. Here are the true enlarged 2nd and 3rd images.

    Please see the attached 2nd and 3rd images.
    As you can see, at the website, they copy the dimensions of the first enlarged image.

    http://true-lady.com/lds/l007/l007850326.html

    Anyway, this is the code:

    function preloadImages() {
    if (document.images) {
    pre__517831P1 = newImage('517831P1.jpg');
    pre__517831P2 = newImage('517831P2.jpg');
    pre__517831P3 = newImage('517831P3.jpg');
    preloadFlag = true;


    <a onmouseover="changeImages('sub1','517831PPP1.jpg','sub0','517831P1.jpg');return true" onmouseout="changeImages('sub1','517831PPP1.jpg','sub0','517831P1.jpg');return true" href="javascript:void(0)"><img id="sub1" src="517831PPP1.jpg" alt="" name="sub1" width="132" height="100" border="1"></a>

    <a onmouseover="changeImages('sub2','517831PPP2.jpg','sub0','517831P2.jpg');return true" onmouseout="changeImages('sub2','517831PPP2.jpg','sub0','517831P1.jpg');return true" href="javascript:void(0)"><img id="sub2" src="517831PPP2.jpg" alt="" name="sub2" width="65" height="100" border="1"></a>

    <a onmouseover="changeImages('sub3','517831PPP3.jpg','sub0','517831P3.jpg');return true" onmouseout="changeImages('sub3','517831PPP3.jpg','sub0','517831P1.jpg');return true" href="javascript:void(0)"><img id="sub3" src="517831PPP3.jpg" alt="" name="sub3" width="44" height="100" border="1"></a>

    <img src="517831P1.jpg" name="sub0" alt="" height="400" border="1">



    The sub0 is where the enlarged images appear.

    The enlarged images cannot be placed in the background as there is not space to display all enlarged images at the same time. That's why javascript mouseover function is helpful.

    Can images be predefined when they are preloaded?

    Thanks.
    Rajska
    Attached Images Attached Images

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rajska
    The enlarged images cannot be placed in the background as there is not space to display all enlarged images at the same time. That's why javascript mouseover function is helpful.
    What I meant was that you have a div styled to the width and height of the largest image, then you use CSS to place the image as a background in this div.

    When the person mouse-overs, you use something like in this example to dyamically change the background to the new image.

    It would create the illusion that the image is changing, plus you wouldn't need to worry about the stretching problem.


    Edit:

    Sorry for the rushed and less that stellar reply. I'm in a hurry now, so I'm typing in haste.

    Try what I suggested and if you get stuck I'll sit down later and go through it properly, okay??


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •