Verknüpfung meiner Web Banner Image auf eine URL

ich eine Web-Banner von Grund auf neu erstellt haben:Verknüpfung meiner Web Banner Image auf eine URL

<p><a id="adLink1" target="_top"> <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" /></a></p> 
<script type="text/javascript">// <![CDATA[ 
var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/PatchSee_excess_stock_promo.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/Dymo_XTL_Banner.jpg","http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/The_Copper_Solution_-_Homepage.jpg","http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Assynia_Patch_Cords_-_Up_to_50_off.jpg","http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Product_Range_-_May_1.jpg","http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"); 
var lnks1 = new Array("http://www.cmsplc.com/summer-savings","http://www.cmsplc.com/patchsee-stock-promo-2016","http://www.cmsplc.com/dymo-xtl-trade-in","http://www.cmsplc.com/brands/corning/corning-copper/corning-copper-solution.html","http://www.cmsplc.com/brands/assynia/assynia-copper-connectivity/assynia-patch-cords.html","http://www.cmsplc.com/brands/netscout.html","http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer"); 
var alt1 = new Array(); 
var currentAd1 = 0; 
var imgCt1 = 7; 
var intvl = 0; 




function cycle1() { 
    if (currentAd1 == imgCt1) { 
    currentAd1 = 0; 
    } 
var banner1 = document.getElementById('adBanner1'); 
var link1 = document.getElementById('adLink1'); 
    banner1.src=imgs1[currentAd1] 
    banner1.alt=alt1[currentAd1] 
    document.getElementById('adLink1').href=lnks1[currentAd1] 
    currentAd1++; 
} 

    intvl = window.setInterval("cycle1()",4000); 

    adBanner1.onmouseover = function() { 
    clearInterval(intvl); 
    } 
    adBanner1.onmouseout = function() { 
    intvl = window.setInterval("cycle1()",4000); 
    } 
// ]]></script>

Die erste Bild verlinken nicht auf einer Webseite durch. Alle folgenden Bilder sind perfekt miteinander verbunden. Ich glaube, ich bin etwas fehle hier:

<p><a id="adLink1" target="_top"> <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" /></a></p>

Bitte raten, wie ich dieses Bild auf eine URL-Seite verlinkt werden kann und alle Bilder auf meinem Banner-Link richtig zu gewährleisten.

Quelle

2016-07-22 WebLad

U vergessen href = "http://www.cmsplc.com/summer-savings" für das Element in HTML zu setzen, warum es nicht für den ersten Banner Arbeits .Hier ist der modifizierte Code.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <p> 
 
    <a id="adLink1" target="_top" href="http://www.cmsplc.com/summer-savings"> 
 
     <img id="adBanner1" src="http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg" border="0" alt="" width="804" height="300" /> 
 
    </a> 
 
    </p> 
 
    <script type="text/javascript"> 
 
    // <![CDATA[ 
 
    var imgs1 = new Array("http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/CommScope_Summer_Savings_front_page.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/PatchSee_excess_stock_promo.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/Dymo_XTL_Banner.jpg", "http://www.cmsplc.com/media/wysiwyg/Homepage_Banners_NEW/The_Copper_Solution_-_Homepage.jpg", "http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Assynia_Patch_Cords_-_Up_to_50_off.jpg", "http://www.cmsplc.com/media/wysiwyg/Slider_Banners/Product_Range_-_May_1.jpg", "http://www.cmsplc.com/media/wysiwyg/Fluke_DTX_Buy_Back_2015.jpg"); 
 
    var lnks1 = new Array("http://www.cmsplc.com/summer-savings", "http://www.cmsplc.com/patchsee-stock-promo-2016", "http://www.cmsplc.com/dymo-xtl-trade-in", "http://www.cmsplc.com/brands/corning/corning-copper/corning-copper-solution.html", "http://www.cmsplc.com/brands/assynia/assynia-copper-connectivity/assynia-patch-cords.html", "http://www.cmsplc.com/brands/netscout.html", "http://www.cmsplc.com/fluke-networks-dtx-upgrade-offer"); 
 
    var alt1 = new Array(); 
 
    var currentAd1 = 0; 
 
    var imgCt1 = 7; 
 
    var intvl = 0; 
 

 

 

 

 
    function cycle1() { 
 
     if (currentAd1 == imgCt1) { 
 
     currentAd1 = 0; 
 
     } 
 
     var banner1 = document.getElementById('adBanner1'); 
 
     var link1 = document.getElementById('adLink1'); 
 
     banner1.src = imgs1[currentAd1] 
 
     banner1.alt = alt1[currentAd1] 
 
     document.getElementById('adLink1').href = lnks1[currentAd1] 
 
     currentAd1++; 
 
    } 
 

 
    intvl = window.setInterval("cycle1()", 4000); 
 

 
    adBanner1.onmouseover = function() { 
 
     clearInterval(intvl); 
 
    } 
 
    adBanner1.onmouseout = function() { 
 
     intvl = window.setInterval("cycle1()", 4000); 
 
     } 
 
     // ]]> 
 
    </script> 
 

 

 
</body> 
 

 
</html>

Quelle

2016-07-22 12:41:35 Varatharaj

Vielen Dank! Sehr hilfreich! – WebLad

Zu Beginn haben Sie kein href-Attribut für den Anker gesetzt, daher wird das Bild aufgrund des statischen HTML angezeigt, aber der Anker vermisst die URL. Nach dem ersten Zyklus funktioniert es korrekt, da dann die URL über das Javascript gesetzt wird.

So haben Sie

<p><a id="adLink1" target="_top">...

<p><a id="adLink1" target="_top" href="http://www.cmsplc.com/summer-savings">...

Darüber hinaus ist Ihre window.setInterval("cycle1()",4000); in die falsche Art und Weise genannt zu ändern. Es sollte window.setInterval(cycle1,4000);

Arbeits Geige sein: https://jsfiddle.net/8u3heye0/

Quelle

2016-07-22 12:31:44 mxlse

sehr vielen Dank! Sehr hilfreich! – WebLad

Während du bist, gibt es eine Möglichkeit, eine Schriftrolle oder Schaltflächen hinzufügen? @mxlse – WebLad

Wo möchten Sie das hinzufügen? – mxlse

Verknüpfung meiner Web Banner Image auf eine URL

Antwort

Verwandte Themen