SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick iframes problem

    I was trying to make a game character simluator for a game

    So far I have a index page with two iframes in it.

    There iframes with names "preview" and "menu"

    in the preview window it load page contain following codes

    Code:
    <div style="z-index:-1;position:absolute;top:0;left:0;">
    <p><img name="background" src="images/bg/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:0;position:absolute;top:0;left:0;">
    <p><img name="pet" src="images/pet/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:1;position:absolute;top:0;left:0;">
    <p><img name="capshadow" src="images/helmshadow/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:2;position:absolute;top:0;left:0;">
    <p><img name="hairbg" src="images/hairbg/blank.gif" width="160" height="130"></p></div>
       
    <div style="z-index:3;position:absolute;top:0;left:0;">
    <p><img name="body" src="images/char/oh/char00.gif" width="160" height="130"></p></div>
    
    <div style="z-index:4;position:absolute;top:0;left:0;">
    <p><img name="face" src="images/face/male01.gif" width="160" height="130"></p></div>
    
    <div style="z-index:5;position:absolute;top:0;left:0;">
    <p><img name="faceaccessary" src="images/accessary/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:6;position:absolute;top:0;left:0;">
    <p><img name="eyeaccessary" src="images/accessary/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:7;position:absolute;top:0;left:0;">
    <p><img name="earring" src="images/accessary/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:8;position:absolute;top:0;left:0;">
    <p><img name="headband" src="images/cap/blank.gif" width="160" height="130"></p></div>
    
    <div style="z-index:9;position:absolute;top:0;left:0;" id="hairs">
    <p><img name="hairinhat" src="images/hair/hair00030027.gif" width="160" height="130"></p></div>
    
    <div style="z-index:9;position:absolute;top:0;left:0;" id="hairs">
    <p><img name="hair" src="images/hair/hair00030027.gif" width="160" height="130"></p></div>
    But on the menu, that's where i got stuck at.
    I want make it like, if user click on the image at menu iframe.
    For example: if user click on the hairstyle image then image at the preview fame change the src of the hair.

    Here are the codes for menu.htm.
    Code:
    <table width="525"  border="0">
      <tr>
        <td class="tdstyle"><img src="icons/info.icon.png" width="32" height="28" onClick="hair
    
    ('hair00030000')">&nbsp;</td>
        <td class="tdstyle"><img src="icons/info.icon.png" width="32" height="28" onClick="hair
    
    ('hair00030001')">&nbsp;</td>
        <td class="tdstyle"><img src="icons/info.icon.png" width="32" height="28" onClick="hair
    
    ('hair00030002')">&nbsp;</td>
        <td class="tdstyle"><img src="icons/info.icon.png" width="32" height="28" onClick="hair
    
    ('hair00030003')">&nbsp;</td>
        <td class="tdstyle"><img src="icons/info.icon.png" width="32" height="28" onClick="hair
    
    ('hair00030004')">&nbsp;</td>
    </tr>
    </table>
    Here are part of the code in js file, just for change hair function

    Code:
    var skin = char00;
    var hairstyle = hair00030030;
    var overall = "";
    var top = pants01060026;
    var helm = 1;
    
    function hair(name)
    {
    	if (helm == 1)
    	{
    		document.hair.src= "images/hair/" + name + ".gif";
    	}
    	if (helm == 2)
    	{
    		document.hair.src= "images/hairshadow/" + name + ".gif";
    	}
    	else (helm == 3)
    	{
    		document.hair.src= "images/blank.gif";
    		document.hair.src= "images/blank.gif";
    	}
    	hairstyle = name;
    }

  2. #2
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone got any idea?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change
    <img name="hair"...
    to
    <img id="hair"

    then in your code, change
    document.hair.src

    to
    document.getElementById("hair").src

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still nothing happen when click on the image?

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like it should be OK. Can you post the modified code again or a link please

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cute graphics

    The problem is that you are using iframes and the Items Menu is in a different frame than the Preview.

    So what you need to do (if you really need to use Iframes, which you don't but ok):
    1. Prepare the iframes properly. In your main file, give the two iframes different names (right now they are both called preview) - one preview, the other items for example.
    2. Modify your function hair as follows:
    Code:
    function hair(name)
    {
    	var previewDoc = window.parent.frames["preview"].document;
    	if (helm == 1)
    	{
    		previewDoc.getElementById("hair").src= "/images/hair/" + name + ".gif";
    	}
    	if (helm == 2)
    	{
    		previewDoc.getElementById("hair").src= "/images/hairshadow/" + name + ".gif";
    	}
    	else (helm == 3)
    	{
    		previewDoc.getElementById("hair").src= "/images/blank.gif";
    		previewDoc.getElementById("hair").src= "/images/blank.gif";
    	}
    	hairstyle = name;
    }

  7. #7
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I am really want this to works out.

    hmm... stil nothing happens...

    I tried by passing function from menu iframe to preview iframe but still not working
    Following is js code for menu.htm
    Code:
    function hair(name)
    {
    	parent.preview.hair(name);
    }
    Then on the preview.htm with following code.
    Notice I did change back to <img id="hair"...> to <img name="hair"..> on this test, but no luck.
    Code:
    var hairstyle = hair00030030;
    var helm = 1;
    function hair(name)
    {
    	if (helm == 1)
    	{
    		document.hair.src= "/images/hair/" + name + ".gif";
    	}
    	if (helm == 2)
    	{
    		document.hair.src= "/images/hairshadow/" + name + ".gif";
    	}
    	else (helm == 3)
    	{
    		document.hair.src= "/images/blank.gif";
    		document.hair.src= "/images/blank.gif";
    	}
    	hairstyle = name;
    }


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
  •