Help needed w/responsive image map

HTML & CSS
1

Hello,

Newbie here—I did search other posts but didn’t find a really basic question like this one. On the net I saw people were having issues with image maps and jQuery, but that’s probably not my issue. I used the Zane Ray groups responsive image map generator to make my image map (http://www.zaneray.com/responsive-image-map/) but am unable to get my code to work. When you click on one of the maps it gives an “Error Loading Page” response. What am I doing wrong?

The full HTML and CSS code is here: [http://codepen.io/anon/pen/advOjX] A streamlined version is below. I’ve tried it in Safari and Chrome.

Thanks for any insights you can give me.

    <html>
    	<head>
    		<meta charset="utf-8">	
    	</head> 

    	<body> 
    		<div data-role="page" id="wrapper">	
    			
     <!-- container for banner video -->
    <div data-role="content" id="banner">  
      <div class="divWrapper">  
     
       <!-- image map --> 
<img src="images/charac-outline.png" alt="character vhs tapes" width="100%" height="100%" usemap="#vhstapes" border="0" >     
      
<map name="vhstapes">
    
    <a href="" title="s-bad" style="position: absolute; left: 5.1%; top: 42.55%; width: 31.98%; height: 8.65%; z-index: 2;">
    <a href="" title="poopsmith" style="position: absolute; left: 52.92%; top: 33.17%; width: 32.81%; height: 9.62%; z-index: 2;"></a>
    <a href="" title="kotown" style="position: absolute; left: 52.71%; top: 43.99%; width: 33.33%; height: 10.1%; z-index: 2;">  </a>     
 </map>
       </div>
     </div> 
    			
  <!-- container for all thumbnails -->
  <div data-role="content" class="center ui-content" role="main"> 
    		<div class="three-col">
    
    <!-- container for individual thumb -->
    		<div class="three-col">
    			<div data-role="content" id="content" class="ui-content" role="main">
    				<div class="contentWrapper">
    					<a href="#"/><video src="videos/s-bad.mp4"  controls></video></a>
    				</div>
    				<a href="#"><h3>Strong Bad</h3></a>
    				<div class="contentText"> 
    					<p>Hot. Thinks HE runs the show. Also answers emails.</p> 
    				</div>
    			</div><!-- /Strong Bad -->		
    		  
    			<div data-role="content" id="content" class="ui-content" role="main">
    				<div class="contentWrapper">
    					<a href="#"/><video src="videos/psmith.mp4"  controls></video></a>
    				</div>
    				<a href="#"><h3>The Poopsmith</h3></a>
    				<div class="contentText"> 
    					<p>Took a vow of silence. Works for The King of Town.</p> 
    				</div>
    			</div> <!-- /The Poopsmith -->
    		</div>
      
    	
    			<div data-role="content" id="content" class="ui-content" role="main">
    			 <div class="contentWrapper">
    				<a href="#"/><video src="videos/kotown.mp4"  controls></video></a>
    			 </div>
    			      <a href="#"><h3>The King of Town</h3></a>
    			      <div class="contentText"> 
    					<p>Old, proud. Employs Poopsmith.</p>
    			      </div>
    				</div><!-- /The King of Town -->
    			
    		 </div> <!-- /3 column -->
    	</div> <!-- /all thumbnail containers -->
    			
    		</div><!-- /page -->

    	</body>
    </html>
2

You have not yet put real values in the href=“” and hrref=“#” placeholders to indicate where they are supposed to link to.

I don’t know if that is causing your problem but it is something that needs to be fixed.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.