Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Imagemap problems

    Hey,

    So i'm using iframes and wanted to make it scrolling via the use of an imagemap. So I have TWO imagemaps. One for the scrolling aspect. And the other is for the navigation. I've been working at this for hours now but I can't seem to see my error as to WHy I can't get them both to work.

    my coding
    Code:
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>me&you</title>
    <meta name="Keywords" content="life">
    
    <link rel="stylesheet" type="text/css" href="Files/style.css">
    <script charset="utf-8" id="injection_graph_func" src="Files/injection_graph_func.js"></script>
    </head>
    
    <!-- SLICES -->
    <table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0" height="600">
    	<tbody><tr>
    		<td>
    			<img src="Files/layoutp1.png" usemap="#scroll" alt="" width="286" border="0" height="600"></td>
    		<td>
    			<img src="Files/layoutp2.png" usemap="#map" alt="" width="714" border="0" height="600"></td>
    	</tr>
    </tbody></table>
    <!-- SLICES -->
    
    <map name="scroll">
    <area shape="rect" coords="223,394,252,419" href="#" onmouseover="scrollspeed=-1" onmouseout="scrollspeed=0">
    <area shape="rect" coords="222,432,252,454" href="#" onmouseover="scrollspeed=1" onmouseout="scrollspeed=0"></map>
    
    <map name="map">
    <area shape="rect" coords="735,204,781,247" href="home.htm" target="frame">
    <area shape="rect" coords="736,254,787,298" href="about.htm"target="frame" >
    <area shape="rect" coords="736,309,786,353" href="dates.htm" target="frame">
    <area shape="rect" coords="736,354,786,398" href="other.htm" target="frame"></map>
    
    <div style="position: absolute; left: 275px; top: 165px;" align="left">
    <iframe name="frame" src="Files/main.htm" allowtransparency="0" title="Main" scrolling="no" width="435" align="left" 
    
    frameborder="0" height="290"></iframe>
    </div>
    
    </body></html>
    Right now only the scrolling part is working.

    help is much appreciated.
    Last edited by typicalovestory; 05-17-2009 at 05:29 AM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by typicalovestory View Post
    Hey,

    So i'm using iframes and wanted to make it scrolling via the use of an imagemap. So I have TWO imagemaps. One for the scrolling aspect. And the other is for the navigation. I've been working at this for hours now but I can't seem to see my error as to WHy I can't get them both to work.

    my coding
    Code:
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>me&you</title>
    <meta name="Keywords" content="life">
    
    <link rel="stylesheet" type="text/css" href="Files/style.css">
    <script charset="utf-8" id="injection_graph_func" src="Files/injection_graph_func.js"></script>
    </head>
    
    <!-- SLICES -->
    <table id="Table_01" width="900" border="0" cellpadding="0" cellspacing="0" height="600">
    	<tbody><tr>
    		<td>
    			<img src="Files/layoutp1.png" usemap="#scroll" alt="" width="286" border="0" height="600"></td>
    		<td>
    			<img src="Files/layoutp2.png" usemap="#map" alt="" width="714" border="0" height="600"></td>
    	</tr>
    </tbody></table>
    <!-- SLICES -->
    
    <map name="scroll">
    <area shape="rect" coords="223,394,252,419" href="#" onmouseover="scrollspeed=-1" onmouseout="scrollspeed=0">
    <area shape="rect" coords="222,432,252,454" href="#" onmouseover="scrollspeed=1" onmouseout="scrollspeed=0"></map>
    
    <map name="map">
    <area shape="rect" coords="735,204,781,247" href="home.htm" target="frame">
    <area shape="rect" coords="736,254,787,298" href="about.htm"target="frame" >
    <area shape="rect" coords="736,309,786,353" href="dates.htm" target="frame">
    <area shape="rect" coords="736,354,786,398" href="other.htm" target="frame"></map>
    
    <div style="position: absolute; left: 275px; top: 165px;" align="left">
    <iframe name="frame" src="Files/main.htm" allowtransparency="0" title="Main" scrolling="no" width="435" align="left" 
    
    frameborder="0" height="290"></iframe>
    </div>
    
    </body></html>
    Right now only the scrolling part is working.

    help is much appreciated.
    Welcome to the forums! Your image size is only 714x600 but your map references values of 735-786. I'd start with a hard look here. Make some changes and see if that solves your problem.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    typicalovestory (05-17-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you! that worked.. ergh i spent hours trying to fix that and it got me no where. can't believe i didnt see that.

    thank you

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by typicalovestory View Post
    thank you! that worked.. ergh i spent hours trying to fix that and it got me no where. can't believe i didnt see that.

    thank you
    No problem, glad I could help!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    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
    •