1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript HTML? or java for mouse rollover

Discussion in 'Web Development' started by Levara, Apr 17, 2008.

  1. Levara

    Levara New Member

    I want to set it up that when someone puts the mouse over a thumbnail, the bigger image appears in another area. How do I go about doing this?

    Cheers
    Sue
     
    Levara, Apr 17, 2008
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    ishkey, Apr 17, 2008
    #2
  3. kenbird

    kenbird New Member

    kenbird, Dec 24, 2009
    #3
  4. enigma1

    enigma1 New Member

    Try this that only uses CSS. I used 200x200 for the enlarged image and 100x100 for the thumbnail. Change the a.pimg styles for different size/positioning.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">

body {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  background-color: #FFF;
  color: #000;
}

#wrapper {
  margin: 0 auto;
  width: 780px;
  position: relative;
}

#content {
  color: #000;
  height: 780px;
  float: left;
}

a.pimg {
  width: 100px;
  height: 100px;
  position:relative;
}

a.pimg img {
  border:0;
}

a.pimg img.enlarged {
  border: 0;
  position: absolute;
  visibility: hidden;
}

a.pimg:hover img.enlarged {
  width: 200px;
  height: 200px;
  border: 0;
  visibility: visible;
  margin: -100px 0px 0px -100px;
}

</style>
</head>
<body>
  <div id="wrapper">
    <div id="content">
      <h1>CSS Popup Test</h1><br />Just hover the mouse over the image below to see it enlarged<br /><a href="#" class="pimg"><img src="button8.gif" /><img class="enlarged" src="button8.gif" /></a>
    </div>
  </div>
</body>
</html>
     
    enigma1, Jan 14, 2010
    #4
  5. AdamsonAfton

    AdamsonAfton New Member

    i will advise you to use java.
     
    AdamsonAfton, Jan 18, 2010
    #5