URL의 변수/키에 따라 다른 이미지 표시

현재 제품 선택을 나타내는 URL에 쿼리 문자열을 사용하고 있습니다. 나는 또한 URL 쿼리 문자열에 표시되어 어떤 제품에 따라 헤더 이미지를 표시 할 필요가URL의 변수/키에 따라 다른 이미지 표시

function getQueryVariable(key) { 
    var query = window.location.search.substring(1); 
    var vars = query.split('&'); 
    for (var i = 0; i < vars.length; i++) { 
     var pair = vars[i].split("="); 
     if (decodeURIComponent(pair[0])== key) { 
      return decodeURIComponent(pair[1]); 
     } 
    } 
} 

var product = getQueryVariable('product'); 
document.getElementById("00NK0000000Yqv2").value = product;

: 나는 우리의 웹 사이트에 제출 될 것이다 숨겨진 텍스트 상자에 나타나는 제품 선택의 여지가이 기능을 사용했다. 저는 네 가지 제품 (제조, 건설, 전문가 및 일반)을 보유하고 있습니다.

URL이 다음과 같은 경우 : www.foo.com?product=Construction은 구성 헤더를 표시하거나 www.foo.com?product=Manufacturing 인 경우 제조를 대신 보여줍니다.

출처

2012-11-21 elky

당신은과 같이 이미지의 소스를 변경할 수 있습니다

document.getElementById("headerImg").src = 'header' + product + '.jpg';

을 이미지가 너무 같은 동일한 ID를했을 경우 :

<img id="headerImg" src="images/headerImg.jpg">

출처

2012-11-21 21:10:51 Josh

여러 이미지에서 어떻게 작동하는지 알 수 없습니다. 각 이미지에 고유 ID를 부여해야하므로 작성한 스크립트가 어떻게 작동하는지 보지 못합니다. – elky

예를 들어 URL 변수 "product"의 이미지 결과에 src 속성을 통해 변경되는 img 태그가 하나만 있습니다. "src"속성을 변경하면 브라우저가 새 이미지를 동적으로로드하기 시작합니다. – Josh

아직이 방법으로 작동하지 못했습니다. 계속 노력할 것입니다. 감사. – elky

당신은 요소의 CSS 클래스를 변경할 수 있습니다 제품 이름으로 바꾸고 CSS의 배경 이미지를 교체하십시오. 예를 들어, 헤더 요소에 id = 헤더가 있으면 jquery를 사용하여 다음과 같이 표시됩니다.

$ ('# header'). addClass (product); // 제품은 어디 변수

그런 다음 CSS에서, 당신은뿐만 때문에 스타일을 지정할 수 있습니다 :

는 #header {배경 - 이미지 : 홈페이지 (pathToDefaultImage)}

#의 header.Manufacturing {배경 - 이미지 : url (pathToManufacturingImage)}

출처

2012-11-21 21:11:22 Justine

예, 당신은 value을 설정하는 것과 같은 방식으로 할 수 있습니다 - 쿼리 변수를 기반으로 이미지의 src 속성을 설정하십시오. 같은

뭔가 :

var image; 
if (product === 'Construction') image = 'your_construction_image.png'; 
// more cases 

document.getElementById('yourimageID').src = image;

이 더 나은 접근 방식, 그러나, 당신이 대신 자바 스크립트 후를 설정하는 원하는 HTML을 렌더링하기 위해 서버 측 언어를 사용하는 것입니다.

출처

2012-11-21 21:12:39 freejosh

URL의 변수/키에 따라 다른 이미지 표시

답변

관련 문제