Re: Dynamic images on landing pages

OK - I've got some code for you and I think this should be more straightforward than I expected. Here are the steps for implementing:

• For the image you are going to be replacing, instead of placing the default image into the landing page using the Eloqua Awesome editor, I recommend that you instead place it using the "edit source" from within a text box. That way you can be sure that the ID of the image will not change and this whole thing will be more reliable.
  • The little snippet of code that you will use to embed the image in the text box will look like this:
  • <img id="TargetImage" src="yourImageUrlHere.png">
  • The important thing here is to keep the ID the same since the code below references it.
• Now, copy and paste all of the code below into the "JS Editor" that you can find in the landing page tool box, last tab. Save it.
• Test it by going to your landing URL. The image should change when you use this query string: ?brand=BrandA
• Customize it: switch out the image URLs below to fit your needs. Feel free to add or remove some of the IF statements as needed.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>

// Define the URLs for all the images you are going to use

var image1URL = "http://matthew.villeneuve.us/eloqua/testa.png";

var image2URL = "http://matthew.villeneuve.us/eloqua/testb.png";

var image3URL = "http://matthew.villeneuve.us/eloqua/testc.png";

// Preload the images for a good user experience

var Image1Load = $('<img />').attr('src',image1URL );

var Image2Load = $('<img />').attr('src',image2URL );

var Image3Load = $('<img />').attr('src',image3URL );

// Use Jquery to run this function after the page loads

$(function(){

    // Call the query string grabber function - that function is defined at the very end of the code

    //Notice the word "brand" - that is the query string that the function will look for. Feel free to change it here.

    var brandValue = getQueryVariable("brand");

    // Note that "TargetImage" is the ID of the image you want to replace

    // Also not that "BrandA" ...B ...C are the query string values that are being searched for.  Feel free to change it here.

    if (brandValue=="BrandA"){

        $("#TargetImage").attr("src", image1URL);

    };

    if (brandValue=="BrandB"){

        $("#TargetImage").attr("src", image2URL);

    };

    if (brandValue=="BrandC"){

        $("#TargetImage").attr("src", image3URL);

    };

});

// Define the function that will grab the URL query string variables

function getQueryVariable(variable)

{

       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(pair[0] == variable){return pair[1];}

       }

       return(false);

}

</script>