Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How To Do This ???

    Hello, I am currently using a piece of Javascript to rotate out 3 Advertiser blocks. The script will run completly through the list of advertisers in a random order showing each ad once before resetting the order and displaying again in a random order. This has been working good for us, on our local news site Rockingham Update .com here is the current code with Advertiser's banners.....

    <img src="http://www.rockinghamcountymerchants.com/300x62Banners/186x19AdvertismentsBanner.png"><br /><br />
    <script type="text/javascript">
    var ads = [
    ['http://www.rockinghamcountymerchants.com/AJsPitStop/300x167-AJsPitStop.jpg',
    'http://www.rockinghamcountymerchants.com/AJsPitStop/index.html'],
    ['http://www.rockinghamcountymerchants.com/AJsSweetShoppe/300x167-AJsSweetShoppe.jpg',
    'http://www.rockinghamcountymerchants.com/AJsSweetShoppe/index.html'],

    ['http://www.rockinghamcountymerchants.com/catsmeow/300x250CatsMeow.jpg',
    'http://www.rockinghamcountymerchants.com/catsmeow/index.html'],
    ['http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbing300x250.jpg',
    'http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbingREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/cohenstearoom/300x167CohensTeaRoom.jpg',
    'http://www.rockinghamcountymerchants.com/cohenstearoom/index.html'],

    ['http://www.rockinghamcountymerchants.com/DavidPriceAutoWorks/300X250DavidPriceAutoWorks.jpg',
    'http://www.rockinghamcountymerchants.com/DavidPriceAutoWorks/index.html'],
    ['http://www.rockinghamcountymerchants.com/DebiJoyceConsulting/101810DebiJoyceAd.jpg',
    'http://www.facebook.com/Debijoyceconsulting'],
    ['http://www.rockinghamcountymerchants.com/dyerssheetmetal/DyersSheetMetal-Dec2nd2010.jpg',
    'http://www.rockinghamcountymerchants.com/dyerssheetmetal/index.html'],

    ['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
    'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
    ['http://www.rockinghamcountymerchants.com/elizabeths-wentworth/300x167-ElizabethsWentworth.jpg',
    'http://www.rockinghamcountymerchants.com/elizabeths-wentworth/index.html'],
    ['http://www.rockinghamcountymerchants.com/everydayart/300x167EverydayArt.png',
    'http://www.rockinghamcountymerchants.com/everydayart/index.html'],

    ['http://www.rockinghamcountymerchants.com/fairfuneralhome/300x167FairsFuneral1.jpg',
    'http://www.rockinghamcountymerchants.com/fairfuneralhome/FairREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/FirstPresbyterian/1stPresbyterian300x167.jpg',
    'http://www.rockinghamcountymerchants.com/FirstPresbyterian/1stPresbyterianREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/TheFrontPorch/300x167TheFrontPorch.jpg',
    'http://www.rockinghamcountymerchants.com/TheFrontPorch/index.html'],

    ['http://www.rockinghamcountymerchants.com/gavinsmightychamps/300x167GavinsMightyChamps.jpg',
    'http://www.rockinghamcountymerchants.com/gavinsmightychamps/gavinsmightychampsREDIRECT.html'],

    ['http://www.rockinghamcountymerchants.com/HolidayInnExpress/HolidayInnExpress300x250.jpg',
    'http://www.rockinghamcountymerchants.com/HolidayInnExpress/index.html'],

    ['http://www.rockinghamcountymerchants.com/Kameldas/kamelda300x167.jpg',
    'http://www.rockinghamcountymerchants.com/Kameldas/KameldasREDIRECT.html'],
    ['http://www.rceno.com/RCENO/bannerads/kingsway/300x250GoSeeAMovie.jpg',
    'http://www.rockinghamcountymerchants.com/kingsway4/'],

    ['http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/Mitchells300x167Sept14.jpg',
    'http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/index.html'],
    ['http://www.rockinghamcountymerchants.com/morethanyoga/300x167MTY.jpg',
    'http://www.rockinghamcountymerchants.com/morethanyoga/MoreThanYogaREDIRECT.html'],

    ['http://www.rockinghamcountymerchants.com/pelhamtransportation/300x167PelhamTreeLightning.jpg',
    'http://www.rockinghamcountymerchants.com/pelhamtransportation/Redirect.html'],


    ['http://www.rockinghamcountymerchants.com/gwensinteriors/300x167-Nov11-Gwens.jpg',
    'http://www.rockinghamcountymerchants.com/gwensinteriors/index.html'],

    ['http://www.rockinghamcountymerchants.com/redrivergrill/300x167RedRiverGrill.jpg',
    'http://www.rockinghamcountymerchants.com/redrivergrill'],
    ['http://www.rockinghamcountymerchants.com/ReggieDenneyAuto/300x167ReggieDenney.jpg',
    'http://www.rockinghamcountymerchants.com/ReggieDenneyAuto/index.html'],
    ['http://www.rockinghamcountymerchants.com/eventcenter/300x250REC-RYD.jpg',
    'http://www.theexhibitcenter.com'],
    ['http://www.rockinghamcountymerchants.com/PP-RH-CC/300x167PP-RH-CC.jpg',
    'http://www.rockinghamcountymerchants.com/PP-RH-CC/index.html'],
    ['http://www.rockinghamcountymerchants.com/RockinghamTheatre/RockinghamTheatre300x250.jpg',
    'http://www.rockinghamcountymerchants.com/RockinghamTheatre/index.html'],
    ['http://www.rockinghamcountymerchants.com/RubyRoseTeaRoom/300x167RubyRoseTeaRoom.jpg',
    'http://www.rockinghamcountymerchants.com/RubyRoseTeaRoom/index.html'],


    ['http://www.rockinghamcountymerchants.com/samplesandmore/300x167SamplesAndMore50Percent.jpg',
    'http://www.rockinghamcountymerchants.com/samplesandmore/index.html'],
    ['http://www.rockinghamcountymerchants.com/scottysrugs/Scottys300x250.jpg',
    'http://www.rockinghamcountymerchants.com/scottysrugs/index.html'],
    ['http://www.rockinghamcountymerchants.com/SeaSideMassage/300x167-Seaside-HotStone.jpg',
    'http://www.rockinghamcountymerchants.com/SeaSideMassage/index.html'],


    ['http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/300x167-ArtOfBody-TaylorMadeCombined.jpg',
    'http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/index.html'],
    ['http://www.rockinghamcountymerchants.com/TwoRiversPlaza/300x167-TwoRiversPlaza12-22-10.jpg',
    'http://www.rockinghamcountymerchants.com/TwoRiversPlaza/index.html']

    ];

    // preload the images:
    var adimages = [];
    for ( var i = 0; i < ads.length; ++i )
    {
    adimages[i] = new Image();
    adimages[i].src = ads[i][1];

    }

    var curad = 0;
    var lastad = null;

    var numberOfAdSpots = 3;

    // random re-ordering
    function scramble()
    {
    for ( var i = 0; i < ads.length; ++i )
    {
    var r = Math.floor( ads.length * Math.random() );
    var temp = ads[r];
    ads[r] = ads[i];
    ads[i] = temp;
    }
    if ( lastad == ads[0] )
    {
    ads[0] = ads[ads.length-1];
    ads[ads.length-1] = lastad;
    }
    }

    function getnextad( )
    {
    ad = ads[curad];
    ++ curad;
    if ( curad >= ads.length )
    {
    scramble();
    curad = 0;
    }
    lastad = ad;
    return ad;
    }

    function showNextSet( )
    {
    for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
    {
    var link = document.getElementById("adlink" + inum);
    var image = link.getElementsByTagName("img")[0];
    var ad = getnextad();
    link.href = ad[1];
    image.src = ad[0];
    }
    setTimeout( showNextSet, 15000 ); // 15 seconds between changes
    }
    onload=function(){
    scramble();
    showNextSet();
    }
    </script>
    <div>
    <a id="adlink1" href="" target="PopupAd"><img src="" style="height: 167px; width: 300px;"></a>
    </div>
    <br />
    <div>
    <a id="adlink2" href="" target="PopupAd"><img src="" style="height: 167px; width: 300px;"></a>
    </div>
    <br />
    <div>
    <a id="adlink3" href="" target="PopupAd"><img src="" style="height: 167px; width: 300px;"></a>
    </div>
    </center>
    What I would like to do is take advantage of the jquery options of fading the images, I found this piece of code that works as is for 1 place holder, but I would like for it to be intergrated into the abouve code so the Advertisments in the 3 placeholders have a smoother transition, while still retaining the Random Rotation and Full Cycyle before an Ad repeats.....

    Here is the code with jquery I am referring to .....

    <style type="text/css">
    body {
    margin:0;
    padding:0;
    color: #4E3D4E;
    font: normal sans-serif, Arial;
    background-color: #EDEDED;
    width: 100%;
    }

    a {
    outline: none;
    }
    </style>

    <style type="text/css">
    /* rotator in-page placement */
    div.rotator {
    position:relative;
    height:345px;
    margin-left: 0px;
    display: none;
    }
    /* rotator css */
    div.rotator ul li {
    float:left;
    position:absolute;
    list-style: none;
    }
    /* rotator image style */
    div.rotator ul li img {
    border:none;
    padding: 4px;
    background: #FFF;
    }
    div.rotator ul li.show {
    z-index:500
    }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
    <script type="text/javascript">

    function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 8000 = change to next image after 6 seconds

    setInterval('rotate()',6000);

    }

    function rotate() {
    //Get the first image
    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

    //Un-comment the 3 lines below to get the images in random order

    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );


    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    };



    $(document).ready(function() {
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });
    </script>

    <div class="rotator">
    <ul>
    <li class="show"><a href="http://www.rceno.com/RCENO/advertisers/ChambersOfCommerce/index.html"><img src="http://www.rceno.com/RCENO/advertisers/ChambersOfCommerce/images/300x250.jpg" width="300" height="250" alt="" /></a></li>
    <li><a href="http://www.rockinghamcountyradio.com"><img src="http://www.rceno.com/RCENO/bannerads/WLOE/WLOEWMYN300x154.jpg" width="300" height="154" alt="" /></a></li>
    <li><a href="http://www.rockinghamcountymerchants.com/ReggieDenneyAuto/index.html"><img src="http://www.rceno.com/RCENO/bannerads/EdensOwnJournal/EOJ2.jpg" width="300" height="250" alt="" /></a></li>
    </ul>
    </div>

    The finished code will need to be placed into a Wordpress Sidebar Widget Area,, hence the reason the 2nd code doesnot have head & body tags

    I appreciate any help With this, I am trying to learn what I am doing, but still find myself lost at times.....

    -Rsaw3rd
    www. RockinghamUpdate .com
    Rockingham Update
    Rockingham County Events & News Online

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think the easiest approach here is to leave your existing code pretty much as it is, and introduce the jQuery transitions into your showNextSet function.

    In order to achieve the crossfade between the current and next images, I'd have two images within the adlink, and position them absolutely on top of each other:

    Code:
    <div>
    <a id="adlink2" class="adlink" href="" target="PopupAd">
    <img class="active" src="" style="height: 167px; width: 300px;">
    <img class="next" style="height: 167px; width: 300px;">
    </a>
    </div>
    <br />
    <div>
    <a id="adlink3" class="adlink" href="" target="PopupAd">
    <img class="active" src="" style="height: 167px; width: 300px;">
    <img class="next" style="height: 167px; width: 300px;">
    </a>
    </div>
    with css:

    Code:
    .adlink{position:relative;height:167px;width:300px;display:block}
    .adlink img{position:absolute}
    .active{z-index:2;}
    .next{z-index:1}
    Then make your showNextSet function:

    Code:
    function showNextSet( )
    {
    for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
    {
    var link = $('#adlink' + inum);//set the link variable
    var ad = getnextad();
    link.attr('href',ad[1]);//set the href on the link
    link.find('.next').attr('src',ad[0]);//set new image to the src on the .next element
    link.find('.active').fadeOut(600,function(){//fade the top image out, and when the fade has completed
    	$(this).siblings('.next').removeClass('next').addClass('active');//make the next image the active image
    	$(this).removeClass('active').addClass('next').show();//make the old active image the next image and unhide it
    }); 
    }
    setTimeout( showNextSet, 15000 ); // 15 seconds between changes
    }
    Essentially we're fading out the active image so that the next image shows, then swapping the classes to make the next image the active image and the old active image the next image - then unhiding the faded image ready for the next transition.

    Incidentally, your preload images script isn't right:

    Code:
    adimages[i].src = ads[i][1];
    should be

    Code:
    adimages[i].src = ads[i][0];
    This is relevant as without the preload the transitions may not be smooth if the next image has not already loaded.
    Last edited by SB65; 01-09-2011 at 10:30 AM.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You for the information, I will try this

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I placed the following code in to my editor and tested, I think I have made the proper adjustments, however, all I am getting is placeholders for the images with red xs....

    <img src="http://www.rockinghamcountymerchants.com/300x62Banners/186x19AdvertismentsBanner.png"><br /><br />
    <script type="text/javascript">
    var ads = [
    ['http://www.rockinghamcountymerchants.com/AJsPitStop/300x167-AJsPitStop.jpg',
    'http://www.rockinghamcountymerchants.com/AJsPitStop/index.html'],
    ['http://www.rockinghamcountymerchants.com/AJsSweetShoppe/300x167-AJsSweetShoppe.jpg',
    'http://www.rockinghamcountymerchants.com/AJsSweetShoppe/index.html'],

    ['http://www.rockinghamcountymerchants.com/catsmeow/300x250CatsMeow.jpg',
    'http://www.rockinghamcountymerchants.com/catsmeow/index.html'],
    ['http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbing300x250.jpg',
    'http://www.rockinghamcountymerchants.com/CittysPlumbing/CittysPlumbingREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/cohenstearoom/300x167CohensTeaRoom.jpg',
    'http://www.rockinghamcountymerchants.com/cohenstearoom/index.html'],

    ['http://www.rockinghamcountymerchants.com/DavidPriceAutoWorks/300X250DavidPriceAutoWorks.jpg',
    'http://www.rockinghamcountymerchants.com/DavidPriceAutoWorks/index.html'],
    ['http://www.rockinghamcountymerchants.com/DebiJoyceConsulting/101810DebiJoyceAd.jpg',
    'http://www.facebook.com/Debijoyceconsulting'],
    ['http://www.rockinghamcountymerchants.com/dyerssheetmetal/DyersSheetMetal-Dec2nd2010.jpg',
    'http://www.rockinghamcountymerchants.com/dyerssheetmetal/index.html'],

    ['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
    'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
    ['http://www.rockinghamcountymerchants.com/elizabeths-wentworth/300x167-ElizabethsWentworth.jpg',
    'http://www.rockinghamcountymerchants.com/elizabeths-wentworth/index.html'],
    ['http://www.rockinghamcountymerchants.com/everydayart/300x167EverydayArt.png',
    'http://www.rockinghamcountymerchants.com/everydayart/index.html'],

    ['http://www.rockinghamcountymerchants.com/fairfuneralhome/300x167FairsFuneral1.jpg',
    'http://www.rockinghamcountymerchants.com/fairfuneralhome/FairREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/FirstPresbyterian/1stPresbyterian300x167.jpg',
    'http://www.rockinghamcountymerchants.com/FirstPresbyterian/1stPresbyterianREDIRECT.html'],
    ['http://www.rockinghamcountymerchants.com/TheFrontPorch/300x167TheFrontPorch.jpg',
    'http://www.rockinghamcountymerchants.com/TheFrontPorch/index.html'],

    ['http://www.rockinghamcountymerchants.com/gavinsmightychamps/300x167GavinsMightyChamps.jpg',
    'http://www.rockinghamcountymerchants.com/gavinsmightychamps/gavinsmightychampsREDIRECT.html'],

    ['http://www.rockinghamcountymerchants.com/HolidayInnExpress/HolidayInnExpress300x250.jpg',
    'http://www.rockinghamcountymerchants.com/HolidayInnExpress/index.html'],

    ['http://www.rockinghamcountymerchants.com/Kameldas/kamelda300x167.jpg',
    'http://www.rockinghamcountymerchants.com/Kameldas/KameldasREDIRECT.html'],
    ['http://www.rceno.com/RCENO/bannerads/kingsway/300x250GoSeeAMovie.jpg',
    'http://www.rockinghamcountymerchants.com/kingsway4/'],

    ['http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/Mitchells300x167Sept14.jpg',
    'http://www.rockinghamcountymerchants.com/MitchellsDiscountDrug/index.html'],
    ['http://www.rockinghamcountymerchants.com/morethanyoga/300x167MTY.jpg',
    'http://www.rockinghamcountymerchants.com/morethanyoga/MoreThanYogaREDIRECT.html'],

    ['http://www.rockinghamcountymerchants.com/pelhamtransportation/300x167PelhamTreeLightning.jpg',
    'http://www.rockinghamcountymerchants.com/pelhamtransportation/Redirect.html'],


    ['http://www.rockinghamcountymerchants.com/gwensinteriors/300x167-Nov11-Gwens.jpg',
    'http://www.rockinghamcountymerchants.com/gwensinteriors/index.html'],

    ['http://www.rockinghamcountymerchants.com/redrivergrill/300x167RedRiverGrill.jpg',
    'http://www.rockinghamcountymerchants.com/redrivergrill'],
    ['http://www.rockinghamcountymerchants.com/ReggieDenneyAuto/300x167ReggieDenney.jpg',
    'http://www.rockinghamcountymerchants.com/ReggieDenneyAuto/index.html'],
    ['http://www.rockinghamcountymerchants.com/eventcenter/300x250REC-RYD.jpg',
    'http://www.theexhibitcenter.com'],
    ['http://www.rockinghamcountymerchants.com/PP-RH-CC/300x167PP-RH-CC.jpg',
    'http://www.rockinghamcountymerchants.com/PP-RH-CC/index.html'],
    ['http://www.rockinghamcountymerchants.com/RockinghamTheatre/RockinghamTheatre300x250.jpg',
    'http://www.rockinghamcountymerchants.com/RockinghamTheatre/index.html'],
    ['http://www.rockinghamcountymerchants.com/RubyRoseTeaRoom/300x167RubyRoseTeaRoom.jpg',
    'http://www.rockinghamcountymerchants.com/RubyRoseTeaRoom/index.html'],


    ['http://www.rockinghamcountymerchants.com/samplesandmore/300x167SamplesAndMore50Percent.jpg',
    'http://www.rockinghamcountymerchants.com/samplesandmore/index.html'],
    ['http://www.rockinghamcountymerchants.com/scottysrugs/Scottys300x250.jpg',
    'http://www.rockinghamcountymerchants.com/scottysrugs/index.html'],
    ['http://www.rockinghamcountymerchants.com/SeaSideMassage/300x167-Seaside-HotStone.jpg',
    'http://www.rockinghamcountymerchants.com/SeaSideMassage/index.html'],


    ['http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/300x167-ArtOfBody-TaylorMadeCombined.jpg',
    'http://www.rockinghamcountymerchants.com/ArtOfBody-TaylorMade/index.html'],
    ['http://www.rockinghamcountymerchants.com/TwoRiversPlaza/300x167-TwoRiversPlaza12-22-10.jpg',
    'http://www.rockinghamcountymerchants.com/TwoRiversPlaza/index.html']

    ];

    // preload the images:
    var adimages = [];
    for ( var i = 0; i < ads.length; ++i )
    {
    adimages[i] = new Image();
    adimages[i].src = ads[i][0];

    }

    var curad = 0;
    var lastad = null;

    var numberOfAdSpots = 3;

    // random re-ordering
    function scramble()
    {
    for ( var i = 0; i < ads.length; ++i )
    {
    var r = Math.floor( ads.length * Math.random() );
    var temp = ads[r];
    ads[r] = ads[i];
    ads[i] = temp;
    }
    if ( lastad == ads[0] )
    {
    ads[0] = ads[ads.length-1];
    ads[ads.length-1] = lastad;
    }
    }

    function getnextad( )
    {
    ad = ads[curad];
    ++ curad;
    if ( curad >= ads.length )
    {
    scramble();
    curad = 0;
    }
    lastad = ad;
    return ad;
    }

    function showNextSet( )
    {
    for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
    {
    var link = $('#adlink' + inum);//set the link variable
    var ad = getnextad();
    link.attr('href',ad[1]);//set the href on the link
    link.find('.next').attr('src',ad[0]);//set new image to the src on the .next element
    link.find('.active').fadeOut(600,function(){//fade the top image out, and when the fade has completed
    $(this).siblings('.next').removeClass('next').addClass('active');//make the next image the active image
    $(this).removeClass('active').addClass('next').show();//make the old active image the next image and unhide it
    });
    }
    setTimeout( showNextSet, 15000 ); // 15 seconds between changes
    }
    </script>

    <style type="text/css">
    .adlink{position:relative;height:167px;width:300px;display:block}
    .adlink img{position:absolute}
    .active{z-index:2;}
    .next{z-index:1}
    </style>

    <div>
    <a id="adlink2" class="adlink" href="" target="PopupAd">
    <img class="active" src="" style="height: 167px; width: 300px;">
    <img class="next" style="height: 167px; width: 300px;">
    </a>
    </div>
    <br />
    <div>
    <a id="adlink3" class="adlink" href="" target="PopupAd">
    <img class="active" src="" style="height: 167px; width: 300px;">
    <img class="next" style="height: 167px; width: 300px;">
    </a>
    </div>

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have you loaded jQuery?

    EDIT: It's probably a good idea anyway to set your images with html rather than leaving the src blank so there's something there as the page loads - could be a "loading" GIF or a "Ads here" or something.

    Here's a working test page if you need it.
    Last edited by SB65; 01-09-2011 at 07:40 PM.

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank You So Very Much, I am still learning, really just beginning to learn, Thank You for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •