[nick2price]

Hi guys, quick question. I display some images like so

<div class="food"> 
   <a href="#">
   <img class="image1" src="<?php echo get_stylesheet_directory_uri(); ?>/price1.jpg"></img>
   </a>

   <a href="#">
   <img class="image2" src="<?php echo get_stylesheet_directory_uri(); ?>/price2.jpg"></img>
   </a>

   <a id="price3" href="#">
   <img src="<?php echo get_stylesheet_directory_uri(); ?>/price4.jpg"></img>
   </a>
</div>

So the above works perfectly. The problem now is I am using media quiries, and for the smaller screens, I want to display two different images for image1 and image2. So, I set display:none to the third image, so now only 2 display. But how can I actually change the image urls? The only way I can think of is to remove the above and instead change it to 3 divs set to the size of the image. Then I could possibly set a background image using css, and change this background image url in the media query.

Is this the approach to take or is there any better way?

Cheers

[Atli]

That's what I would do. The alternatives I can think of either involve using Javascript to change the src attributes, or adding a second set of <img> tags along side the first set and show or hide them in CSS based on the screen size. Neither approach is all that appealing.

[nick2price]

Kool, so just wanted to further elaborate on this. I have changed the html to

<div class="food"> 
   <a href="#">
   <img class="image1" src="<?php echo get_stylesheet_directory_uri(); ?>/price1.jpg"></img>
   <img class="image1a" src="<?php echo get_stylesheet_directory_uri(); ?>/price1tab.jpg"></img>
   </a>

   <a href="#">
   <img class="image2" src="<?php echo get_stylesheet_directory_uri(); ?>/price2.jpg"></img>
   <img class="image2a" src="<?php echo get_stylesheet_directory_uri(); ?>/price1tab.jpg"></img>
   </a>

   <a id="price3" href="#">
   <img class="image3" src="<?php echo get_stylesheet_directory_uri(); ?>/price4.jpg"></img>
   <img class="image3a" src="<?php echo get_stylesheet_directory_uri(); ?>/price1tab.jpg"></img>
   </a>
</div>

The images will be sharing the same url, hence the reason they are contained within an a tag. So, immediately in my css, I do

.image1a, .image2a, .image3a{
	display:none;
}

No problems here. Now in my media query, I need to remove the other images, and display the ones which were originally hidden. So to remove the images I do

.image1, .image2, .image3{
	display:none;
}

And then to display them

.image1a, .image2a, .image3a{
	display:inline-block;
}

Everything seems to work without any problems, does it look correct?

Cheers