Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Image Viewer

  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Question Image Viewer

    Hi All,

    I know this is a simple problem because ive done it before, but i just cant remember how i did it

    What i want to do is create an image viewer, i have a number of thumbnails and a large div tag that is blank, when the user rollsover the thumbnail the large image is display in the blank div, but whats happening is the large image is displaying in the thumbnail div.

    This is what i have:

    Thumbnail Div:

    Code:
    <div id="ptmimage1"><a href="#"><img src="../../Images/shim.gif" width="59" height="88" border="0" /></a></div>
    Large Div:

    Code:
    <div id="ptmlargeimg"></div>
    Then the CSS is set like this:

    Code:
    #ptmimage1{
    	position:absolute;
    	background:url(Images/ptm1.jpg) no-repeat top left;
    	width: 59px;
    	height: 88px;
    	left: 17px;
    	top: 102px;
    }
    
    #ptmimage1 a:hover{
    	background:url(Images/ptm1_large.jpg) no-repeat top left;
    	width: 206px;
    	height: 309px;
    }
    Can anyone help me jog my memory on this one?

    Thanks

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    I've remembered now, for anyone who might have the same problem... I forgot to give the rollover div tag the:

    position:absolute;

    element

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    you could also use the visible element and just call it when rolled over, of course that may be way too much code..

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Ive got it working now, but there is still a problem, because i have it working as a rollover. If the user rollovers over but then moves the mouse in the slightest (even within the thumb bounds) the picture disapears or flickers on an off.

    If there away round this, is there a way i could make the feature onclick or something, but without the onclick loading a new page??

    thanks

  • #5
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You could try removing the onmouseout from the thumbnail and putting an onclick into the big picture div. I use something similar a lot, except that I have a 'close' button at the bottom of the picture div which closed the div when clicked.

    John Rostron


  •  

    Posting Permissions

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