Solved

how to display or hide an image based upon javascript variable

Posted on 2009-05-14
2
250 Views
Last Modified: 2013-12-07
Trying to properly test GWO.. all pages and data are dynamic with URL rewites.  I want to be able to display or hide images for google website optimizer testing

My idea is to have this javascipt
<script type="TEXT/JAVASCRIPT">var display=1
</script>
which i can then not be used in a GWO option

then later when the images are displayed they are hidden if display is not 1

the image is shown by a function call
tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT,parameters)

parameters can be style="display: none;" which hides the image... I know how to do this with an onclick or other event but do not know how to show or hide the image (or text block or whatever) based on whether a javascript variable is set earlier

Though this question is specific it is general in that I am looking for a way to display or hide  a php produced html block with javascript so I can perform GWO tests
0
Comment
Question by:levelninesports
2 Comments
 
LVL 7

Accepted Solution

by:
tg_wilk earned 500 total points
ID: 24391311
If you set all images to display: none at the beginning, you can iterate through all images at the bottom of the page and set display to inline or block, if display variable is set:
<script type="text/javascript">

if (display == 1)

{

    var images = document.getElementsByTagName("img");

    for(var j=0; j<images.length; j++)

    {

       if (images[j].style.display == 'none') images[j].style.display='inline';

    }

}

</script>

Open in new window

0
 

Author Closing Comment

by:levelninesports
ID: 31581747
thanks worked great.. just for completeness the image display line read
tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT,'id="img" style="display: none;"')
the end part being the relevant piece
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now