www.webdeveloper.com
Results 1 to 7 of 7

Thread: Click image to reveal other images - JavaScript newbie

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Location
    Midwest
    Posts
    3

    Click image to reveal other images - JavaScript newbie

    Hello all,

    I have one single image of a circle and I want to be able to click on different parts of this circular image to reveal (make visible) other images (with text and links) depending on the part of the circle that is clicked.

    I've looked up code for rollover/click to reveal, but I'm curious if it's possible to accomplish what I'm trying to without breaking up the single circle image into different pieces. I've accomplished this in Flash but I'm trying to make an HTML/JavaScript version so it's viewable on Apple products. I've already created the HTML document, I just need to apply the JavaScript functionality. So I can provide either of those (HTML or Flash files) if you need to understand what I'm talking about better.

    Much thanks,
    Matt

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    See the map tag for example on this w3cschools.com page

  3. #3
    Join Date
    Feb 2012
    Location
    Midwest
    Posts
    3
    Thank you, Julien. I don't want to swap the image, but keep the initial circular image visible and display other images when pieces of the circle are clicked.

    I just remembered being able to use sliced images, so I may slice up the pieces of the circle I need and display them in a table. I will post my Flash version to my website to show as an example.

    Thanks again!
    Matt

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    multiple image placeholders?

    Something like this http://webdocdo.tripod.com/genericRo.../multiple.html ?

    Create separate named image holders and have roll-over or click thumb change src

  5. #5
    Join Date
    Feb 2012
    Location
    Midwest
    Posts
    3
    That's closer to what I'm trying to accomplish, auntnini. Only I'm looking for a click solution, rather than a roll-over solution. I'm sure that just requires some changing in the code from telling it to display the image on rollover to display on click, but anyway the Flash version can be found here:

    http://maddenwebdesign.com/wholenesswheel_swf_page.html
    Last edited by Matt_@_CPS; 07-24-2012 at 03:09 PM.

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    old demo code

    Old Tripod http://webdocdo.tripod.com/genericRo.../multiple.html demo referenced above used onclick to run script to open POP window

    Code:
    /*in BODY <a href="#nogo" onclick="loadpage('../things___.jpg')">TEXT</a>*/
    
    // JavaScript Document
    var mypop=null;
    function loadpage(url) {
    if ((!mypop) || (mypop.close)) {
    mypop = window.open (url, 'mypop', 'width=400px,height=375px,toolbar=0,resizable=1,screenx=0,left=20,screeny=0,top=20');
    } else { mypop.document.location.href=url; }
    mypop.focus(); return true; 
    }
    So drop that, and change onmouseover to onclick

    Code:
    <div id="space">
    <img src="images/pic01.gif"  name="ensemble" id="ensemble" 
    alt="Ensemble"><br>
    <h3 id="outfit" align="center">Caption about Ensemble.</h3>
    </div>
    <div id="thumbnails">
    <a href="#" target="space" onclick="javascript:loadpage('images/pic01.gif')" 
    onMouseOver="document.ensemble.src=pic01.src; document.tops.src=pic01t.src; document.jackets.src=pic01j.src; document.skirts.src=pic01s.src; document.getElementById('outfit').innerHTML ='Ensemble 01'" title="Ensemble 01">
    <img class="thumb" src="images/pic01.gif" alt="pic01"></a>
    
    <a href="#" target="space" onclick="javascript:loadpage('images/pic02.gif')" 
    onMouseOver="document.ensemble.src=pic02.src; document.tops.src=pic02t.src; document.jackets.src=pic02j.src; document.skirts.src=pic02s.src; document.getElementById('outfit').innerHTML ='Ensemble 02'" title="Ensemble 02">
    <img class="thumb" src="images/pic02.gif" alt="pic02"></a>
    ... </div>
    
    <div id="tops">
    <img src="images/pic01t.gif" alt="tops" name="tops" id="tops">
    <p id="textT">Top/blouse<br>
    </p>
    </div>
    
    <div id="jackets">
    <img src="images/pic01j.gif" alt="jackets" name="jackets" id="jackets">
    <p id="textJ">Jackets<br>
    </p>
    </div>
    
    <div id="skirts">
    <img src="images/pic01s.gif" alt="skirts" name="skirts" id="skirts">
    <p id="textS">Skirts/slacks<br>
    </p>
    </div>
    Basically you name the placeholder image(s) -- e.g., name="skirts" id="skirts" -- and change the image source src with onMouseOver or onClick event handler. Don't specify width="" or height="" for placeholder image(s) unless they are all the same size because they will be distorted to the specified values if the sizes differ.

    Old demo used complicated <script> approach. which could be simplified

    Code:
    <script type="text/javascript">
    <!-- Adapted from www.morgangaynin.co 
    //LARGE IMAGES 
    pic01 = new Image
    pic01t = new Image
    pic01j = new Image
    pic01s = new Image
    pic02 = new Image
    pic02t = new Image
    pic02j = new Image
    pic02s = new Image
    pic03 = new Image
    pic03t = new Image
    pic03j = new Image
    pic03s = new Image
    pic04 = new Image
    pic04t = new Image
    pic04j = new Image
    pic04s = new Image
    pic05 = new Image
    pic05t = new Image
    pic05j = new Image
    pic05s = new Image
    pic06 = new Image
    pic06t = new Image
    pic06j = new Image
    pic06s = new Image
    
    pic01.src = "images/pic01.gif"
    pic01t.src = "images/pic01t.gif"
    pic01j.src = "images/pic01j.gif"
    pic01s.src = "images/pic01s.gif"
    pic02.src = "images/pic02.gif"
    pic02t.src = "images/pic02t.gif"
    pic02j.src = "images/pic02j.gif"
    pic02s.src = "images/pic02s.gif"
    pic03.src = "images/pic03.gif"
    pic03t.src = "images/pic03t.gif"
    pic03j.src = "images/pic03j.gif"
    pic03s.src = "images/pic03s.gif"
    pic04.src = "images/pic04.gif"
    pic04t.src = "images/pic04t.gif"
    pic04j.src = "images/pic04j.gif"
    pic04s.src = "images/pic04s.gif"
    pic05.src = "images/pic05.gif"
    pic05t.src = "images/pic05t.gif"
    pic05j.src = "images/pic05j.gif"
    pic05s.src = "images/pic05s.gif"
    pic06.src = "images/pic06.gif"
    pic06t.src = "images/pic06t.gif"
    pic06j.src = "images/pic06j.gif"
    pic06s.src = "images/pic06s.gif"
    </script>
    Last edited by auntnini; 07-24-2012 at 05:08 PM. Reason: add link & corrections

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    You have only to work with 1 main container and the whole image with a map (with the z-index 0) and containers in position absolute top:0;left:0 in the same container (with different z-index). This containers contain : one of the six images (z_index:1), a container (with a z-index to 2 and a transparent background z-index:2) to display text and links and a positioned image (z-index:3) to hide the mask

    I give you, for example, the whole image, the image 3 (build with a print-screen) and the close image and an extract of code to complete with the other images...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    div {display:block;width:419px;height:419px;margin:0;padding:0;border:0;}
    #main	{margin:30px auto;position:relative;z-index:0}
    #imgCnt {position:absolute;display:none;top:0;left:0;z-index:1}
    #txtCnt {position:absolute;display:none;top:0;left:0;z-index:2;background:transparent;font-size:large;text-align:center;padding:75px 0;}
    img	{display:block;margin:0;border:0;}
    #imgCls {position:absolute;top:62px;left:278px;display:none;z-index:3;cursor:pointer;}
    </style>
    </head>
    <body>
    <div id="main">
    	<img src="all.gif" usemap="#mask">
    	<div id="imgCnt"></div>
    	<div id="txtCnt"></div>
    	<img id="imgCls" onclick="hideMask()" src="close.gif">
    </div>
    <map name="mask"><area shape="poly" coords="298,228,380,244,366,290,325,341,268,271" alt="" href="javascript:showMask('mg3.gif')">
    <!-- to complete with other mask -->
    </map>
    
     
    <script type="text/javascript">
    function $(id) {return document.getElementById(id);
    }
    function showMask(i){
    	$('imgCnt').style.display='block';
    	$('imgCnt').innerHTML='<img src="'+i+'">';
    	$('txtCnt').style.display='block';
    	$('txtCnt').innerHTML='<p>The text an the links...</p>';// To define in an array with the image number (Number(i.substr(2,1)) 
    	$('imgCls').style.display='block';
    }
    function hideMask(){ 
    	$('imgCnt').innerHTML='';
    	$('imgCnt').style.display='none';
    	$('txtCnt').innerHTML='';
    	$('txtCnt').style.display='none';
    	$('imgCls').style.display='none';
    }
    </script>
    </body>
    </html>
    Attached Images Attached Images
    Last edited by 007Julien; 07-24-2012 at 06:12 PM. Reason: attachements

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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