[RESOLVED] Switching images - need to include alt

ElphieFabalaFae

I have been using a code to call up specific images depending on the page that is being visited. However, when the images are displayed the alt information is missing from the image details/properties. The site has to have the alt information added to all images for accessibility, and I'm not sure where I can add the alt attribute in the code in order for the information to show up. I would also like the alt info to be relevant to the image, so it will need to change with each image. Any ideas anyone???

The code that switches the image depending on the page:

<?php
function sectImage($sect='home') 
{ 
  switch($sect) 
  { 
	case 'home':
	  $img = 'images/mainpage.jpg';
	  break;
	case 'news': 
      $img = 'images/newspage.jpg'; 
      break; 
	case 'biog': 
      $img = 'images/imgpage.jpg'; 
      break; 
	case 'career1':
      $img = 'images/carpage.jpg'; 
      break; 
	case 'career2':
      $img = 'images/carpage.jpg'; 
      break; 
	case 'gallery':
      $img = 'images/galpage.jpg'; 
      break; 
	case 'media':
      $img = 'images/medpage.jpg'; 
      break; 
	case 'contact':
      $img = 'images/contpage.jpg'; 
      break; 
    default:
	  $img = 'images/error.gif';
	  break;
}
	return $img; 
} 
?>

The code calling the images on the page:

<img src="<?php echo sectImage($_GET['page']); ?>" class="padded">

Obviously I can add the alt tag directly to the code above, but that will mean every image will be the same, and I don't want that. However, if that is not possible, I guess I will have to go for the generic alt.

NogDog

What do you want the alt text to be? Is it something you can add to another variable in each switch, then use that variable in the img tag just like you do the path?

Also note that if the image is purely for visual decoration and does not actually have any meaningful content for a user, it is perfectly valid to have an empty alt attribute, e.g.: alt="".

ElphieFabalaFae

Hi there! After a little rethinking and a little code jigging, I have managed to combat two issues that I have - W3 not validating the page because of the php code within the img src, and getting the alt to be including, and different for each image!

For anyone reading that might be interested, I added the full <img> element, including alt attribute to the original first piece of code which selects the individual images, and then removed the <img src="<?php echo sectImage($GET['page']); ?>" class="padded"> line and replaced with just <?php echo sectImage($GET['page']); ?> Hey presto, problem solved!

Weedpacket

ElphieFabalaFae wrote:
W3 not validating the page because of the php code within the img src

W3's validator should not be seeing any PHP code; if you're just pasting the PHP file in to be validated then that's wrong. What you should be supplying to the validator is the HTML that running the PHP script generates.

ElphieFabalaFae

Weedpacket;10902224 wrote:
W3's validator should not be seeing any PHP code; if you're just pasting the PHP file in to be validated then that's wrong. What you should be supplying to the validator is the HTML that running the PHP script generates.

I was just validating the page as I have with all the other pages, all of which I've had no problems with. What it didn't like was the fact it thought there was a '<' where there shouldn't be. Because the start of the php code, the '<' was in the src attribute, it didn't like it!

Now that the php code is not within the src attribute, and there are no '<' where they shouldn't be, the validator is a very happy bunny and so am I, as I've solved two problems with one solution.

NogDog

Except that (assuming no typos) the browser never "sees" the <?php tags and the PHP source code within them, only the resulting output. Likewise, the validator should be validating the output of your PHP scripts, not the scripts themselves. If you want to validate the page but do not have a live link you can supply to the validator, then open the page locally in your browser, do a "view source" in the resulting browser page, and copy-and-paste that text to the validator. Or simpler yet, get the "Web Developer" add-on for Firefox, then after displaying the page do a Ctrl-Shift-A to validate the local HTML.