Changing links to images

[Bacchanal]

I have very basic web design knowledge, this site was designed for me by someone else, and I am now responsible for maintaining/updating it.  I'm trying to change the text links on the booking page into images, but when I changed the code to what seemed correct, it didn't work.  The images were there, but the links stopped functioning.  Any help would be very much appreciated.  Thank you!

 

site: www.bacchanalpromotions.com/booking.php

 

Original booking.html code:

 

<div id="tabs">
<ul>
<li><a href="" class="tab" id="tab1" onclick="showPanel('panel1');return false;">» Restaurants</a></li>
<li><a href="" class="tab" id="tab2" onclick="showPanel('panel2');return false;">» Nightclubs</a></li>
<li><a href="" class="tab" id="tab3" onclick="showPanel('panel3');return false;">» Festivals</a></li>
<li><a href="" class="tab" id="tab4" onclick="showPanel('panel4');return false;">» Private Events</a></li>
</ul>
</div>

 

New code:

 

<div id="tabs">
<ul>
<li><img src="images/buttons/dark-rest.jpg" href="" class="tab" id="tab1" onclick="showPanel('panel1');return false;"></li>
<li><img src="images/buttons/dark-nigh.jpg" href="" class="tab" id="tab2" onclick="showPanel('panel2');return false;"></li>
<li><img src="images/buttons/dark-fest.jpg" href="" class="tab" id="tab3" onclick="showPanel('panel3');return false;"></li>
<li><img src="images/buttons/dark-rest.jpg" href="" class="tab" id="tab4" onclick="showPanel('panel4');return false;"></li>
</ul>
</div>

 

I also changed the individual php files for each link (ie. festivals.php) from this:

 

<div id="tabs">
<ul>
<li><a href="booking.php?page=restaurants">» Restaurants</a></li>
<li><a href="booking.php?page=nightclubs">» Nightclubs</a></li>
<li><a style="color:#fff;" href="booking.php?page=festivals">» Festivals</a></li>
<li><a href="booking.php?page=events">» Private Events</a></li>
</ul>
</div>

 

to this:

 

<div id="tabs">
<ul>
<li><img src="images/buttons/dark-rest.jpg" href="booking.php?page=restaurants"></li>
<li><img src="images/buttons/dark-nigh.jpg" href="booking.php?page=nightclubs"></li>
<li><img src="images/buttons/light-fest.jpg" href="booking.php?page=festivals"></li>
<li><img src="images/buttons/dark-priv.jpg" href="booking.php?page=events"></li>
</ul>
</div>

 

The resulting page appears correct, but the buttons are not clickable.

 

Thanks in advance for any advice

[borris83]

The code has to be in the following format:

 

 

<li><a href="" class="tab" id="tab1" onclick="showPanel('panel1');return false;"><img src="images/buttons/dark-rest.jpg"></a></li>

 

 

Anyway it is just basic html

[Bacchanal]

SUCCESS!!!  THANK YOU SO MUCH

 

 

[Bacchanal]

I'm sure this isn't the right section for this, as it doesn't appear to be a directly php related issue, however it deals with the same page and I'm sure it's an easy fix... I just don't know what that fix would be...

 

The site in question (www.bacchanalpromotions.com/booking.php) now works exactly as I intended, thanks to boris83's help.  Upon viewing the page on a different computer however, the images are stretched, it would appear to 100x100px.  The images are supposed to be 100x30px, and they show up that way on my screen using firefox and chrome, in all tested resolutions (I don't have ie on my system.)

 

The system the other person used I believe is 1024x768, using IE of some sort.  I tried manually setting the width and height in the image code, but it didn't work.

 

here's the current code:

 

<li><a href="booking.php?page=restaurants"><img src="images/buttons/dark-rest.png" height="30" width="100"></a></li>

 

here's the problem screenshot:

 

[SuperBlue]

Well i just tried it in IE7, and it worked fine. At least i didn't notice anything. It looks like it was in an earlier version of IE on the Screenshot, and in that case you shouldn't bother to waste time fixing it. If people dont upgrade their browser, then it must be on their account.

 

 

You may however want to ditch those width and height attributes, and use CSS instead.

 

Also remember to define the Unit of Measurement you want to use, simply typing width="200" doesn't make any sense, in your case you would be missing px at the end.

[Bacchanal]

Well i just tried it in IE7, and it worked fine. At least i didn't notice anything. It looks like it was in an earlier version of IE on the Screenshot, and in that case you shouldn't bother to waste time fixing it. If people dont upgrade their browser, then it must be on their account.

 

 

You may however want to ditch those width and height attributes, and use CSS instead.

 

Also remember to define the Unit of Measurement you want to use, simply typing width="200" doesn't make any sense, in your case you would be missing px at the end.

 

Thanks for the input.  The site currently does use CSS, although I haven't the slightest clue how to modify it to include these new images.  Could that be the issue?  The gallery thumbnails (here) are 100x100px, although there are other images within the site that aren't, so I don't know why only those would be effected.

[TheFilmGod]

You could make your life x100000000 times easier if you just made the images as background images. You could directly add the bg image through the use of css.

[hchsk]

I'm not sure if this will solve your problem, but try taking the quotation marks off of the height tag.

[Ken2k7]

I'm not sure if this will solve your problem, but try taking the quotation marks off of the height tag.

That will have no effect. Actually, it's better for the quotation marks to be there. xHTML 1.0 compliant.