2 Replies - 417 Views - Last Post: 03 September 2012 - 04:37 PM

#1 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Replacing images

Posted 03 September 2012 - 02:03 PM

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

Is This A Good Question/Topic? 0
  • +

Replies To: Replacing images

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Replacing images

Posted 03 September 2012 - 02:59 PM

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.
Was This Post Helpful? 1
  • +
  • -

#3 nick2price  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,826
  • Joined: 23-November 07

Re: Replacing images

Posted 03 September 2012 - 04:37 PM

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
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1