SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: Image Displays

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Displays

    Hey,
    I have just created a simple page whcih has an unordered list on it. I hope to construct a simple 1 row, 2 columed table with the unordered list in the left hand cell and to have an image displaying in the right hand box which changes depending on which item in the list is being hovered over at a particular moment. The list items are uk european attractions names like so:

    - Thorpe Park
    - Legoland
    - Warick Castle
    - London Eye
    - etc

    I basically want the logo of each attraction show in the second box when the mouse is hovered over that attraction in the list.

    Is there a nice easy way to accomplish this?

    Thanks

    Neil

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Yes - with javascript!

    Give me a minute and I will write it up for you
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That or you could use CSS's :hover method to change the background of the container.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers spike, I appreciate it

  5. #5
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do also want to include a line of text in the right hand box as well

  6. #6
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Will that change?

    Also, will it be outside the image?
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  7. #7
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Right then
    Code:
    <script type="text/javascript">
    
    function $(id) {
    	return document.getElementById(id);
    }
    
    function showLogo(id) {
    	
    	var target = $('displayLogo');
    	
    	img = new Array();
    	txt = new Array();
    	
    	img[1] = 'thorpe_park.jpg'
    	txt[1] = '<br />text for thorpe park'
    	
    	img[2] = 'alton_towers.jpg'
    	txt[2] = '<br />text for thorpe park'
    
    	img[3] = 'legoland.jpg'
    	txt[3] = '<br />text for thorpe park'
    
    	img[4] = 'london_eye.jpg'
    	txt[4] = '<br />text for thorpe park'
    	
    	target.innerHTML = img[id] + txt[id];
    	
    	
    }
    
    </script>
    
    <div id="displayLogo">LOGO HERE</div>
    
    <ul>
    	<li onmouseover="showLogo(1)">Thorpe Park</li>
    	<li onmouseover="showLogo(2)">Alton Towers</li>
    	<li onmouseover="showLogo(3)">Legoland</li>
    	<li onmouseover="showLogo(4)">London Eye</li>
    </ul>
    I have used a div for the image change and obviously use an <img> tag to display the logo.

    You can either use a div inside the td or give the td an id
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ahve done this and I get a small box where an image should be but no image is actually shown:

    Code HTML4Strict:
    <script type="text/javascript">
     
    function $(id) {
    	return document.getElementById(id);
    }
     
    function showLogo(id) {
     
    	var target = $('displayLogo');
     
    	img = new Array();
    	txt = new Array();
     
    	img[1] = '<img src"img/small_graphics/merlin_logo.jpg'
    	txt[1] = '<br />text for this pic'
     
    	img[2] = '<img src"img/small_graphics/golflogo.jpg" />'
    	txt[2] = '<br />text for thorpe park'
     
    	img[3] = 'legoland.jpg'
    	txt[3] = '<br />text for thorpe park'
     
    	img[4] = 'london_eye.jpg'
    	txt[4] = '<br />text for thorpe park'
     
    	target.innerHTML = img[id] + txt[id];
     
     
    }
     
    </script>
     
     
    <ul>
    <li onmouseover="showLogo(1)">Alton Towers</li>
    <li onmouseover="showLogo(2)">British Airways London Eye</li>
    <li>Thorpe Park</li>
    <li>Sea Life</li>
    <li>Legoland Discovery Centres.</li>
    <li>Chessington World of Adventures</li>
    <li>Heide Park</li>
    <li>Madame Tussauds</li>
    <li>Warick Castle</li>
    <li>The Dungeons</li>
    <li>Gardaland</li>
    <li>Earth Explorer</li>
    </ul>
     
    <div id="displayLogo"></div>

  9. #9
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stupid me, sorted it

    I would have found it earlier if I wasn;t useing notepad without syntax highlighting

  10. #10
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Code:
    img[1] = '<img src"img/small_graphics/merlin_logo.jpg" />'
        txt[1] = '<br />text for this pic'
       
        img[2] = '<img src"img/small_graphics/golflogo.jpg" />'
        txt[2] = '<br />text for thorpe park'
     
        img[3] = 'legoland.jpg'
        txt[3] = '<br />text for thorpe park'
     
        img[4] = 'london_eye.jpg'
        txt[4] = '<br />text for thorpe park'
       
        target.innerHTML = img[id] + txt[id];
    etc...

    check your paths and right click on the image and investigate the path!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  11. #11
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,220
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    me no see php, moving thread to javascript forum
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about like this?
    Code javascript:
    function showImage(imagepath, text){
    	var img = document.getElementById('imgShowLogo');
    	var txt = document.getElementById('logInfo');
    	if(img && txt){
    		img.src = imagepath;
    		txt.innerHTML = text;
    	}
    }
    Code php:
    $attraction = array(
    	1=>array('name'=>'Thorpe Park','img'=>'Thorpe.jpg','text'=>'text goes 1'),
    	2=>array('name'=>'Legoland','img'=>'Legoland.jpg','text'=>'text goes 2'),
    	3=>array('name'=>'London Eye','img'=>'London.png','text'=>'text goes 3')
    	);
    echo "<ul>";
    foreach($attraction as $attid=>$info){
    	echo "<a href=\"javascript:void(null\" onMouseOver=\"showImage('" . $info['img'] . "','" . $info['text'] . "')\">";
    	echo "<li>" . $info['name'] . "</li>\n";
    	echo "</a>";
    }
    echo "</ul>";
    echo '<div>';
    echo '<img src="" id="imgShowLogo" width="200" height="140" /><br>';
    echo '<div id="logInfo"></div>';
    echo '<div>';
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Spike,
    Just tried to modify the script to add some text into a division below that table but It doesn;t seem to work. I'm not up in javascript so please go light on me!

    Here is the code:

    Code JavaScript:
    <script type="text/javascript">
     
    function $(id) {
    	return document.getElementById(id);
    }
     
    function showLogo(id) {
     
    	var target = $('displayLogo');
     
    	img = new Array();
    	txt = new Array();
     
    	img[1] = '<img src="img/small_graphics/at.jpg" />'
    	txt[1] = '<br />'
     
    	img[2] = '<img src="img/small_graphics/bale.jpg" />'
    	txt[2] = '<br />'
     
    	img[3] = '<img src="img/small_graphics/tp.jpg" />'
    	txt[3] = '<br />'
     
    	img[4] = 'london_eye.jpg'
    	txt[4] = '<br />'
     
    	target.innerHTML = img[id] + txt[id];
     
     
    }
     
     
     
    function $(id) {
    	return document.getElementById(id);
    }
     
    function showInfo(id) {
     
    	var target = $('displayInfo');
     
    	info = new Array();
     
     
    	info[1] = '<p>Alton Towers is a theme park in Staffordshire with a large 
     
    variety of rides to cater for the entire family.</p>'
     
    	info[2] = '<img src="img/small_graphics/bale.jpg" />'
     
    	info[3] = '<img src="img/small_graphics/tp.jpg" />'
     
    	info[4] = 'london_eye.jpg'
     
    	target.innerHTML = info[id];
     
     
    }
     
    </script>
     
    <table border="1" align="center">
    <tr>
    <td>
    <ul>
    <li onmouseover="showLogo(1)" onmouseover="showInfo(1)">Alton Towers</li>
    <li onmouseover="showLogo(2)">British Airways London Eye</li>
    <li onmouseover="showLogo(3)">Thorpe Park</li>
    <li onmouseover="showLogo(4)">Sea Life</li>
    <li onmouseover="showLogo(5)">Legoland Discovery Centres.</li>
    <li onmouseover="showLogo(6)">Chessington World of Adventures</li>
    <li onmouseover="showLogo(7)">Heide Park</li>
    <li onmouseover="showLogo(8)">Madame Tussauds</li>
    <li onmouseover="showLogo(9)">Warwick Castle</li>
    <li onmouseover="showLogo(10)">The Dungeons</li>
    <li onmouseover="showLogo(11)">Gardaland</li>
    <li onmouseover="showLogo(12)">Earth Explorer</li>
    </ul>
    </td><td>
     
    <div id="displayLogo"><img src="img/small_graphics/hovertext.jpg" /></div>
     
    </td>
    </tr>
    <tr>
    <td>
    <div id="displayInfo">INFO</div>
    </td>
    </tr>
    </table>

    Also how do I make the cursor change do a pointing finger when hovering over the list items?

  15. #15
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For cursor hand:
    Code:
    <div style="cursor:pointer;"></div>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  16. #16
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Just as a quickie, you can use the same function but alter the innerHTML to change different areas.

    Code:
    <script type="text/javascript">
     
    function $(id) {
        return document.getElementById(id);
    }
     
    function showLogo(id) {
        
        var target = $('displayLogo');
        var info = $('displayInfo');    
    
        img = new Array();
        txt = new Array();
        
        img[1] = '<img src="img/small_graphics/at.jpg" />'
        txt[1] = '<p>Alton Towers is a theme park in Staffordshire with a large variety of rides to cater for the entire 
    
    family.</p>'
        
        img[2] = '<img src="img/small_graphics/bale.jpg" />'
        txt[2] = '<br />'
     
        img[3] = '<img src="img/small_graphics/tp.jpg" />'
        txt[3] = '<br />'
     
        img[4] = 'london_eye.jpg'
        txt[4] = '<br />'
        
        target.innerHTML = img[id];
        info.innerHTML   = txt[id];
        
        
    }
     
     
     
    </script>
     
    <table border="1" align="center">
    <tr>
    <td>
    <ul>
    <li onmouseover="showLogo(1)">Alton Towers</li>
    <li onmouseover="showLogo(2)">British Airways London Eye</li>
    <li onmouseover="showLogo(3)">Thorpe Park</li>
    <li onmouseover="showLogo(4)">Sea Life</li>
    <li onmouseover="showLogo(5)">Legoland Discovery Centres.</li>
    <li onmouseover="showLogo(6)">Chessington World of Adventures</li>
    <li onmouseover="showLogo(7)">Heide Park</li>
    <li onmouseover="showLogo(8)">Madame Tussauds</li>
    <li onmouseover="showLogo(9)">Warwick Castle</li>
    <li onmouseover="showLogo(10)">The Dungeons</li>
    <li onmouseover="showLogo(11)">Gardaland</li>
    <li onmouseover="showLogo(12)">Earth Explorer</li>
    </ul>
    </td><td>
     
    <div id="displayLogo"><img src="img/small_graphics/hovertext.jpg" /></div>
     
    </td>
    </tr>
    <tr>
    <td>
    <div id="displayInfo">INFO</div>
    </td>
    </tr>
    </table>
    If you want it explaining properly I will help out
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  17. #17
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried that code but it doesn't, the image parts don;t even work with that either!

  18. #18
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    argh! the code didnt paste right!
    Code:
    <script type="text/javascript">
     
    function $(id) {
        return document.getElementById(id);
    }
     
    function showLogo(id) {
        
        var target = $('displayLogo');
        var info = $('displayInfo');    
    
        img = new Array();
        txt = new Array();
        
        img[1] = '<img src="img/small_graphics/at.jpg" />'
        txt[1] = '<p>Alton Towers is a theme park in Staffordshire with a large variety of rides to cater for the entire family.</p>'
        
        img[2] = '<img src="img/small_graphics/bale.jpg" />'
        txt[2] = '<br />'
     
        img[3] = '<img src="img/small_graphics/tp.jpg" />'
        txt[3] = '<br />'
     
        img[4] = 'london_eye.jpg'
        txt[4] = '<br />'
        
        target.innerHTML = img[id];
        info.innerHTML   = txt[id];
        
        
    }
     
     
     
    </script>
     
    <table border="1" align="center">
    <tr>
    <td>
    <ul>
    <li onmouseover="showLogo(1)">Alton Towers</li>
    <li onmouseover="showLogo(2)">British Airways London Eye</li>
    <li onmouseover="showLogo(3)">Thorpe Park</li>
    <li onmouseover="showLogo(4)">Sea Life</li>
    <li onmouseover="showLogo(5)">Legoland Discovery Centres.</li>
    <li onmouseover="showLogo(6)">Chessington World of Adventures</li>
    <li onmouseover="showLogo(7)">Heide Park</li>
    <li onmouseover="showLogo(8)">Madame Tussauds</li>
    <li onmouseover="showLogo(9)">Warwick Castle</li>
    <li onmouseover="showLogo(10)">The Dungeons</li>
    <li onmouseover="showLogo(11)">Gardaland</li>
    <li onmouseover="showLogo(12)">Earth Explorer</li>
    </ul>
    </td><td>
     
    <div id="displayLogo"><img src="img/small_graphics/hovertext.jpg" /></div>
     
    </td>
    </tr>
    <tr>
    <td>
    <div id="displayInfo">INFO</div>
    </td>
    </tr>
    </table>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  19. #19
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, Thanks for the help, Once I ahve completed the page I am using it for and got it uploaded then I'll post here just to let you see it!

  20. #20
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Glad it's working now!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

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