Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

how to put borders around images?


Guest

Recommended Posts

I want grey borders around the images in product listing and

in new products tables...

 

Whats the best way to do this?

 

Also check my site and tell me what you think :)

Link to comment
Share on other sites

Add the line $image.= 'class=fotgal';

in

includes/functions/html_output.php:

 

  if (tep_not_null($alt)) {

     $image .= ' title=" ' . htmlspecialchars($alt) . ' "';

$image .=  'class=fotgal ';

   }

 

Then in styles.css comment out the 3 lines begionning A:hover and replace with:

A:hover { color:#990000;font-weight:bold; text-decoration:underline}

.fotgal {border:2px; border-thickness: 2px; border-color: orange;

border-style: solid;}



A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px;

border-color: purple; border-style: solid}

 

This also will have a rollover effect for the image. Sorry the colours are taken from my site where you can see it in action.

 

hth

 

David

 

PS. I liked your site. I haven't managed to do a background yet. (I think it would benefit from a few more images to replace the rather strident placeholders).

Link to comment
Share on other sites

On checking more closely the stylesheet changes are simpler than I stated above:

 

In stylesheet.css simply add:

.fotgal {border:2px; border-thickness: 2px; border-color: orange; 

border-style: solid;} 

A:hover .fotgal, A:active .fotgal {border:2px; border-thickness: 2px;

Link to comment
Share on other sites

umm bad news... this method has put borders around EVERY image.. not just my product images...

 

I definetely don't want borders around my buttons :)

 

Any ideas?

Link to comment
Share on other sites

ok found the answer....

 

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

Then change any calls from tep_image to tep_image_borders in the product listing etc where you want your borders!

Link to comment
Share on other sites

Well it is working on the assumption that anything with width, height and an Alt tag is likely to be a clickable image. I see that some but not all buttons also have these. Failing that I wasn't able to distinguish between buttons and images. Buttons though are in a subdirectory so that might work but then there are the gifs such as the shopping cart.

Maybe there is a better way!

Link to comment
Share on other sites

ok found the answer....

 

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

quote]

Sounds promising. Let me know how you get on!

Link to comment
Share on other sites

just copy the entire tep_image function as a new function (ie tep_image_borders) and apply the change to the new function.

 

Then change any calls from tep_image to tep_image_borders in the product listing etc where you want your borders!

Ick. I'm sorry, but that's just poor coding when the existing image function allows you to append parameters. For the calls to tep_images() where the image to be displayed is a product image, simply call it like this:

tep_image('picture.gif', 'a picture', 100, 80, 'class="fotgal"');

Of course remembering to add a style into the stylesheet called fotgal and defining it as a border of however many pixels, and whatever colour.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...