CSS의 배경 이미지에서 링크를 만들 수 있습니까

Question

안녕하세요 저는 제가 구축 한 전자 상거래 사이트를 가지고 있으며 나중에 모든 제품에 페이팔 청구서를 제출하기로 결정했으며 약 900 개입니다. 그래서 장바구니 추가 버튼이있는 곳에 배경 이미지를 만들었습니다. 나는 이것을 수행하여 자신을 통합 한 900 개 이상의 제품을 거칠 필요가 없었습니다.

그래서 코드를 만들거나 연결할 수 있습니까? 이것은 모든 제품에있는 모든 단일 이미지에 대해 동일하게 보편적 인 링크가 될 것입니다.

CSS 코드 :

.singular .pricing { 
    padding-left:0; 
    padding-bottom: 4em; 
    background-image: url(http://www.prodjsoundlighting.com/wp-content/uploads/2012/12/render.png); 
    background-position: bottom left; 
    background-repeat: no-repeat; 
    background-size: 15em; 
} 

그래서 나는 모든 제품에 가서 그것을 위해 링크를 생성하지 않고 클릭 가능한 링크로 위의 배경 이미지를 만들려고합니다.

메리 크리스마스! 업데이트]

:

<div class="prodslideshow"> 
<div class="slidecontainer"> 
[superzoomgallery] 
</div> 
</div> 
<div class="item-post"><a href="/"> 
<div class="prod-image-cont"> 
<img src="" alt="" width="145px" height="160px" /> 
</div></a> 
<div class="discription"></div> 
<div class="pricing"> 
<h2 class="producthover"></h2> 
<h2></h2> 
[wp_cart:led-par-56-24-uvb:price:329.99:end] 
</div> 
</br></br></br></br></br> 
<div class="prodinfo"> 
<h3 style="color:black; font-weight:bold;">About:<br/></h3> 

<br/> 
<h3 style="color:black; font-weight:bold;">Features:<br/></h3> 

<br/> 
<h3 style="color:black; font-weight:bold;">Specifications:<br/></h3> 
</div> 
</div> 

배경 이미지는 여기 아래에 간다

샘플 HTML은 :

<div class="pricing"> 
    <h2 class="producthover"></h2> 
    <h2></h2> 
    [wp_cart:led-par-56-24-uvb:price:329.99:end] 
    </div> 

이 하나 하나 개별 제품에 대한 HTML 템플릿입니다.

<div id="primary"> 
      <div id="content" role="main"> 
       <div class="singlepostcontent"> 
       <?php while (have_posts()) : the_post(); ?> 

        <nav id="nav-single"> 
         <h3 class="assistive-text"><?php _e('Post navigation', 'twentyeleven'); ?></h3> 
         <span class="nav-previous"><?php previous_post_link('%link', __('<span class="meta-nav">&larr;</span> Previous', 'twentyeleven')); ?></span> 
         <span class="nav-next"><?php next_post_link('%link', __('Next <span class="meta-nav">&rarr;</span>', 'twentyeleven')); ?></span> 
        </nav><!-- #nav-single --> 

        <?php get_template_part('content', 'single'); ?> 

        <?php comments_template('', true); ?> 

       <?php endwhile; // end of the loop. ?> 
       </div><!-- .singlepostcontent --> 
      </div><!-- #content --> 
     </div><!-- #primary --> 

Answer 1

900 개의 제품 모두가 표준 정보를 위해 하나의 템플릿을 사용하기 때문에이 작업을 수행 할 필요가 없을 것입니다. 따라서 사용되는 템플릿을 찾아 하나의 구매 버튼을 추가하십시오. 그런 다음 모든 제품에 표시됩니다.

그런 다음 버튼을 표시하는 데 사용하는 코드가 링크 검색어에 일부 제품 정보를 포함하는 경우 링크와 함께 고유 한 제품 데이터를 보낼 수 있습니다.

Answer 2

당신은 배경 이미지를 CSS를 사용하는 포장 사업부의 링크를 만들 수 있습니다

마다 하나 하나에 영향을 미친다 모든 이상의 모든 제품에 대한 HTML 템플릿이 있습니다. 예를 들어, 많은이 있지만 있습니다

는

<style type="text/css"> 
.myspan { 
    display: block; 
} 
</style> 
<a href="#"><span class="myspan">text</span></a> 

Answer 3

이것은 당신이 CSS를 사용하는 배경 이미지 위에 다수의 클릭 가능한 영역을 만들 수 깔끔한 약간의 트릭이다. HTML의 이미지 맵을 만드는 것보다 쉽습니다.

는 먼저 다음은이 상자에 CSS의 페이지

에 요소에 배경 이미지를 추가 할 수 있습니다. 상자 위치를 지정했는지 확인하십시오 : 상대적이거나 링크가 제대로 작동하지 않습니다.

.box1 { 
    position: relative; 
    margin: 20px 0 20px 40px; 
    padding: 5px 0; width: 300px; 
    height: 100px; 
    background-image: url(images/background.jpg); 
    background-repeat: no-repeat; 
    } 

그런 다음 바로 클릭 할 수 있도록하려는 배경 이미지 섹션의 맨 위에 맞는 투명 상자, 절대 위치를 만들 수 있습니다. 이 상자에 테두리를 지정하는 것이 더 쉽기 때문에 실제로 상자를 가져올 때 실제로 볼 수 있습니다. 다음과 같이 표시되어야합니다.

다음은 CSS 상자입니다.

가 여기에 HTML의

#box-link { 
    position: absolute; 
    top: 8px; 
    left: 20px; 
    width: 83px; 
    height: 83px; 
    background-color: transparent; 
    border: 1px solid yellow; } 

: 당신이 당신이 (당신이 사용자가 그것을보고하지 않으려면 테두리를 제거하는 것을 잊지 마세요) 원하는 위치에 배치 될 때까지 위쪽, 왼쪽, 너비와 높이 픽셀을 조작 링크가있는이 상자의 최종 버전 :

<div class="box1"> 
    <a id="box-link" href="#"></a> 
    <p>The background of this box is an image.</p> 
    </div> 

이 정보가 도움이되기를 바랍니다. 이 기술을 사용하면 배경 이미지에 클릭 할 수있는 영역을 원하는만큼 만들 수 있습니다.

Answer 4

jsFiddle DEMO

단순히 이상의 모든 제품 이미지를 반복하는 jQuery를 .each() 방법을 사용합니다.

이렇게하면 페이팔 로고을 클릭 가능한 div 요소에 첨부합니다.

는 jQuery를 :이 페이지의 WilliamK answer에서 알 수 있듯이

$(document).ready(function(){ 

    $('.product').each(function(){ 
     $(this).append('<div class="paypal" />'); 
    }); 

    $('.paypal').click(function(){ 
     alert('Paypal Logo clicked!'); 
    }); 

}); 

그러나, 내가 사용하는 가장 좋은 방법은 사용중인 모든 템플릿을 변경하는 것입니다 그와 함께 동의합니다. 그리고 귀하의 질문에 대한 최근 업데이트로, 그것은 당신이 필요에 따라 수정할 수있는 PHP 템플릿을 가지고 있어야 보인다.