As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Artist Learns The Internet, Poorly.

ZeitgeistHeistZeitgeistHeist Registered User regular
edited February 2011 in Help / Advice Forum
This might be elementary, but for some reason, I just can't figure it out. I'm creating a website that has an image carousel, and I would like an image to be displayed along with some text when one of the carousel images is hovered over. I'm guessing this would have to be done in an iframe, but, I'm not incredibly sure how to start that because I'm very new. Any ideas?


code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml&quot; lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>none</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel({ display: 2 });
});
</script>

</head>
<body>
<div id="slider1">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a class="buttons prev" href="#">left</a>
</p>
<div class="viewport">
<ul class="overview">
<li> <img src="images/Inventory images for carousels/beds/c-max.JPG" /> </li>
<li> <img src="images/Inventory images for carousels/beds/concorde.JPG" width="211" height="101" /> </li>
<li> <img src="images/Inventory images for carousels/beds/harris.JPG" /> </li>
<li> <img src="images/Inventory images for carousels/beds/hb.JPG" width="172" height="102" /> </li>
<li> <img src="images/Inventory images for carousels/beds/isa.JPG" width="225" height="117" /> </li>
<li> <img src="images/Inventory images for carousels/beds/jour+bed.JPG" width="223" height="108" /> </li>
<li> <img src="images/Inventory images for carousels/beds/ladera_bed.JPG" width="220" height="146" /> </li>
<li> <img src="images/Inventory images for carousels/beds/marriott.JPG" width="208" height="93" /> </li>
<li> <img src="images/Inventory images for carousels/beds/meti.JPG" width="233" height="89" /> </li>
<li> <img src="images/Inventory images for carousels/beds/romance.JPG" width="225" height="138" /> </li>
<li> <img src="images/Inventory images for carousels/beds/shama.JPG" width="212" height="134" /> </li>
<li> <img src="images/Inventory images for carousels/beds/soho.JPG" width="214" height="100" /> </li>
<li> <img src="images/Inventory images for carousels/beds/super soft storage.JPG" width="212" height="124" /> </li>
<li> <img src="images/Inventory images for carousels/beds/supersoft bed.JPG" width="213" height="93" /> </li>
<li> <img src="images/Inventory images for carousels/beds/swami-bed.JPG" width="229" height="148" /> </li>
<li> <img src="images/Inventory images for carousels/beds/webb.JPG" width="240" height="98" /> </li>
<li> <img src="images/Inventory images for carousels/beds/wyne.JPG" width="248" height="148" /> </li>
<li> <img src="images/Inventory images for carousels/beds/yoko.JPG" width="235" height="142" /> </li>
<li> <img src="images/Inventory images for carousels/beds/zuomodernameliebedblack.JPG" width="221" height="113" />
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</body>
</html>

ZeitgeistHeist on

Posts

  • lifeincognitolifeincognito Registered User regular
    edited February 2011
    Howdy!

    You may want to check out the Stupid Technology Forum. They have a thread dedicated to programming and you might even be free to post it as a thread on its own. I am not sure how many programmers frequent the H/A Forum, but you might get lucky.

    lifeincognito on
    losers weepers. jawas keepers.
  • TejsTejs Registered User regular
    edited February 2011
    This is actually pretty easy to do; It looks like you know some stuff about jQuery, so I'll try to frame the response with examples in jQuery.

    1) Associate metadata with each image tag inside of some javascript variable. Example:
    <script type="text/javascript" language="javascript">
    var metaData = {
         '0': { Img: Sample.jpg, MouseoverImg: Sample2.hpg, MouseoverText: 'Some Text' },
         '1': { Img: Sample.jpg, MouseoverImg: Sample2.hpg, MouseoverText: 'Some Text' },
         // etc
    };
    </script>
    

    2) Assign a new CSS class to all of your image elements in the carousel. This is just to make things semantically easier. For this example, I use the class "clickImage". Additionally, number your elements by specifying it's order in the 'rel' attribute. Example:
    <li> <img src="images/Inventory images for carousels/beds/c-max.JPG" rel="0" /> </li>
    

    3) Find all the elements with the class clickImage and assign a hover event handler to it. Then switch out the information based on the meta data you set up.
    $('.clickImage').hover(function()
    {
          var elementId = $(this).attr('rel');
          var info = metaData[elementId];
    
          $(this).attr('src', info.MouseoverImg);
          var textSpan = $('<span/>');
          textSpan.text(info.MouseoverText);
          $(this).after(textSpan);
    },
    function()
    {
          var elementId = $(this).attr('rel');
          var info = metaData[elementId];
    
          $(this).attr('src', info.Img);
          $(this).parent().find('span').remove();
    });
    

    Tejs on
Sign In or Register to comment.