Results 1 to 2 of 2

Thread: image effect

  1. #1

    image effect

    i am doing a website for a school, you can see a half done page here
    on the middle rightside there is a bluebox ,inside there got three thumbnail, i want to mouse over the thumbnail and showing a bigger picture
    i use this javascript ( also provided by cf member) put inside the head
     <script type="text/javascript">
    function display_picture(pic_url, pic_x, pic_y){
     var pic_win = document.getElementById("pic_win")
     pic_win.innerHTML = "<div style='vertical-align:middle; height:100%;'><img align='middle' src='"+pic_url+"'></div>" = pic_x + "px" = pic_y + "px" = "block"
    function hide_pic(){
     var pic_win = document.getElementById("pic_win") = "none"
    then i added this line
    <div id="pic_win" style="position:absolute; display:none; width:200px; height:200px;"></div>
    but it just wont work, you can view my souce code to see.... thanks for your help

  2. #2
    You will need this function (can put it where you want in your html file) :

    function rs_img( w, h, o ){ = h; = w;
    and your thumbnails should be "called" like this in your html :

    HTML Code:
    <img src="image.jpg" width="300" height="200" border="0" onMouseOver="rs_img('450','300',this);" onMouseOut="rs_img('300','200',this)">
    The original size (in my example) is 300 x 200 which becomes 450 x 300 when you put your mouse over the thumbnail. The original size comes back after your mouse leaves the thumbnail.

    Hope it helped!

Posting Permissions

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