Custom Field - Active Image? (2 posts)

  1. twilitegxa
    Posted 3 years ago #

    I have a site at: http://artifex-design.co.uk/clients/protaxreturns/#

    What I need to do is when the user clicks on one of the sections under the slider (Our Clients, Get Started, FAQs), then the image icon changes to a different version (an orange one if the slide is active, the gray one if the slide is not active).

    The way it's set up right now is they are pulling the image from a custom field. So i figure I could set a custom field for active and inactive and place the icons' image tags in there (as I have it that way now for just the one image for each one), but how could i set it up so that the active one is the correct image and otherwise it's the other image? Here is the code that controls the images:

    <?php for ($i = 0; $i < $featured_num; $i++) { ?>
    					<li<?php if ( $i == 0 ) echo ' class="active"'; ?>>
    						<div class="controller">
    							<h3><?php echo $arr[$i]['titleicon']; ?><?php echo esc_html( $arr[$i]['titletext'] ); ?></h3>
    							<p><?php echo esc_html( $arr[$i]['description'] ); ?></p>
    				<?php } ?>

    which is defined above as:

    $arr[$i]['titleicon'] = get_post_meta($post->ID, 'icon', true);

    Can anyone tell me how I could write this to do what I am asking? The titles' colors are changed by using CSS, but I don't know if it's possible to change the image this way since it's not a background image, and that's the only way i know how to change the image with CSS. Can anyone help?

  2. twilitegxa
    Posted 3 years ago #

    I tried doing this:

    #controllers .active h3 img {background: url(http://artifex-design.co.uk/clients/protaxreturns/wp-content/uploads/2011/10/tie-symbol.png) no-repeat; z-index: 500; }

    But the image only shows behind the original icon. I used the above image as a test. How can I make it replace the old image?

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.