www.webdeveloper.com
Results 1 to 2 of 2

Thread: text rollover to change images

  1. #1
    Join Date
    Apr 2010
    Posts
    4

    text rollover to change images

    I have a table with two rows and a single cell in each. The top row will house images(s) that I would like to swap out using rollover text links in a lower cell like:

    1 | 2 | 3

    '1' would call 'img1.jpg' into the uppermost cell, '2' would call in 'img2.jpg', etc. on rollover.

    I'm certain this is simple to do, but google hasn't panned out for me so I'm hoping someone can give me a snippet of code to start with and I can manipulate for my purposes.

    Thanks in advance -
    sleepydad

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe you can use this as a template.

    I don't like using tables for layout because imo tables just add additional unnecessary code. If you want to use tables, you should just need to put the 2 divs in the code in table cells.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--
     
    #picList {
    list-style-typenone}
     
    #picList li {
    margin0px 0px 0px 0px;
    padding0px 5px 0px 5px;
    displayinline;
    border-left1px solid black}
     
    #picList .last_item {
    border-right1px solid black}
     
    #picList li:hover {
    text-decorationunderline}
     
    #myPic {
    height200px}
    -->
    </
    style>

    <
    script type="text/javascript">
    <!--
    //preload images
    var myPics = new Array();
    var 
    imgPaths = new Array();
    imgPaths = ['pic1.jpg','pic2.jpg','pic3.jpg'];

    for(var 
    i in imgPaths) {
        
    myPics[i] = new Image();
        
    myPics[i].src imgPaths[i];

     
    function 
    swapImage(imgNum) {
         
    document.getElementById("myPic").src myPics[imgNum].src;
    }  

    //-->
    </script>
    </head>
    <body>
     
    <div id="pic_container">
         <img id="myPic" src="pic3.jpg" alt="">
    </div>
     
    <div id="list_container">
        <ul id="picList">
             <li onmouseover="swapImage(0);"> 1 </li>
             <li onmouseover="swapImage(1);"> 2 </li>
             <li onmouseover="swapImage(2);" class="last_item"> 3 </li>
        </ul>
    </div>
     
    </body>
    </html> 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles