悬停在图像映射上的单击效果

时间:2015-09-22 05:59:59

标签: jquery html css

我创建了一个包含6个圆圈的图像地图。我想在每个圆圈上添加悬停效果。

还添加了Jquery以在单击每个图像时显示不同的内容。它工作正常。但我也希望在页面加载时显示默认内容,这是行不通的。

我在这里添加了代码。

你可以帮我吗?



function codeAddress() {
    $('.whyt').html($('.why-us').html());
}

window.onload = codeAddress;

document.getElementsByClassName( "p5" )[0].onclick = function(){
    $('.whyt').html($('.why-us').html());
};

document.getElementsByClassName( "p6" )[0].onclick = function(){
    $('.whyt').html($('.seo').html());
};

document.getElementsByClassName( "p7" )[0].onclick = function(){
    $('.whyt').html($('.ranking').html());
};

document.getElementsByClassName( "p8" )[0].onclick = function(){
    $('.whyt').html($('.benefits').html());
};

document.getElementsByClassName( "p9" )[0].onclick = function(){
    $('.whyt').html($('.quality').html());
};

document.getElementsByClassName( "p10" )[0].onclick = function(){
    $('.whyt').html($('.faq').html());
};

#map14 area:hover {
    background: url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png');
	display:block;
	position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="why-img" src="https://searchmgseo.com.au/smg/wp-content/themes/smg/Images/Why_Us.png" alt="" usemap="#map14">

             <map id="map14" name="map14">

             <area shape="rect" coords="289,8,407,126" title="" alt="" href="#tt1" class="p5">
             <area shape="rect" coords="17,18,116,117" title="" alt=""  href="#tt1" class="p6">
             <area shape="rect" coords="144,201,246,305" title="" alt=""  href="#tt1" class="p7">
             <area shape="rect" coords="403,283,498,380" title="" alt=""  href="#tt1" class="p8">
             <area shape="rect" coords="235,403,332,503" title="" alt=""  href="#tt1" class="p9">
             <area shape="rect" coords="16,403,116,503" title="" alt=""  href="#tt1" class="p10">

             </map>
         <div class="col-sm-6 whyt">                 
                 <a name="tt1"></a>             
		   </div>
		   
		   <div style="display:none;">   
		   
            <div class="why-us">
              <h3>Why Us</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 
			 <div class="seo">
              <h3>SEO</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 
			 <div class="ranking">
              <h3>Page 1 Rankings</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 
			 <div class="benefits">
              <h3>Benefits</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 
			 <div class="quality">
              <h3>Quality</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 
			 <div class="faq">
              <h3>FAQ</h3>			
	            <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
		Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
			making it work for them. </p>
			<br/>
			<a href="" class="btn-md">Get Quote </a>
             </div>
			 </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您无法在图像地图区域应用悬停效果。我做了一个技巧,将悬停效果应用于图像映射区域。只需在休息图像映射区域应用该技巧。

请检查。

&#13;
&#13;
   

$(document).ready(function(){
	
	$('.p6').mouseover(function(){
		
		$(".nav-wrap span.backer").css({"background":"url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png')","z-index":"999"});
		 
		});
	
	$('.why-img').mouseout(function(){
		$(".nav-wrap span.backer").css({"background":"none","z-index":"100"}); 
	});
	
	
	$('.whyt').html($('.why-us').html());


	$(".p5").click(function(){
		$('.whyt').html($('.why-us').html());
	});


	$(".p6").click(function(){
		 		$(".nav-wrap span.backer").css({"background":"url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png')","z-index":"999"});

		 $('.whyt').html($('.seo').html());
	});

	$(".p7").click(function(){
		$('.whyt').html($('.ranking').html());
	});

	$(".p8").click(function(){
		$('.whyt').html($('.benefits').html());
	});

	$(".p9").click(function(){
		$('.whyt').html($('.quality').html());
	});
 
 
	$(".p10").click(function(){
		$('.whyt').html($('.faq').html());
	});
 
});
&#13;
  

.backer { display:block; width:135px; height:129px; position:absolute; left:0; top:0; z-index:-1; }
.nav-wrap { display:block; position:relative; }
.nav-wrap area { display:block; }
.why-img { position:relative; z-index:200; }
&#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div class="nav-wrap"> <span class="backer"></span> <img class="why-img" src="https://searchmgseo.com.au/smg/wp-content/themes/smg/Images/Why_Us.png" alt="" usemap="#map14">
  <map id="map14" name="map14">
    <area shape="rect" coords="289,8,407,126" title="" alt="" href="#tt1" class="p5">
    <area shape="rect" coords="17,18,116,117" title="" alt=""  href="#tt1" class="p6">
    <area shape="rect" coords="144,201,246,305" title="" alt=""  href="#tt1" class="p7">
    <area shape="rect" coords="403,283,498,380" title="" alt=""  href="#tt1" class="p8">
    <area shape="rect" coords="235,403,332,503" title="" alt=""  href="#tt1" class="p9">
    <area shape="rect" coords="16,403,116,503" title="" alt=""  href="#tt1" class="p10">
  </map>
</div>
<div class="col-sm-6 whyt"> <a name="tt1"></a> </div>
<div style="display:none;">
  <div class="why-us">
    <h3>Why Us</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
  <div class="seo">
    <h3>SEO</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
  <div class="ranking">
    <h3>Page 1 Rankings</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
  <div class="benefits">
    <h3>Benefits</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
  <div class="quality">
    <h3>Quality</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
  <div class="faq">
    <h3>FAQ</h3>
    <p class="why-text">Search Marketing Group is a leader in creating unique Seo&nbsp;strategies that would help your website rank on page 1 of 
      Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for&nbsp;businesses and 
      making it work for them. </p>
    <br/>
    <a href="" class="btn-md">Get Quote </a> </div>
</div>
&#13;
&#13;
&#13;