Jump to content


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


How do you do Image border with ability to cange color at will

Recommended Posts

Hi I want to be able create a border around my images with a ledgend under the images with 3-4 options to change the color of the image.

here is what I have so far. [url=http://www.arthq.com.au/store/index.php?main_page=products_new]http://www.arthq.com.au/store/index.php?main_page=products_new[/url]

Once you go there you need to select the item 'Modern Art' in order to see my popup and the effect I want to get.

Popup does not open 100% (??) so you need to stretch it to see .

On that pop up you will see - image with a frame (which is a jpeg picture image) showing as border.
What I need to do is have a ledgen below the image with its border so that user can select different borders  (with the page refreshing it self)

If the image border is too hard then I will settle with color only. Oh one more thing when you do select the color image popup closes (it should stay unless image it self is clicked to close).

Well how hard is that. Well its damn hard for me after spending hours to get this far and could not find any reference to displaced CSS image border change thingy.

Hope you can help.

Many thanks.

Share this post

Link to post
Share on other sites
I'm didn't catch all of that, but maybe this example could help:

  script type="text/javascript">
    function changeborder($img_id, $b_width, $b_style, $b_color) {
      document.getElementById($img_id).style.borderWidth = $b_width;
      document.getElementById($img_id).style.borderStyle = $b_style;
      document.getElementById($img_id).style.borderColor = $b_color;


<img id="image1" src="somepicture.jpg" /><br />
<a href="#" onClick="javascript:changeborder('image1', '5px', 'outset', '#F00');">Change Border</a>


For more information on the CSS border properties you can use, check [url=http://w3schools.com/]w3schools[/url] for [url=http://w3schools.com/css/pr_border-width.asp]border-width[/url], [url=http://w3schools.com/css/pr_border-style.asp]border-style[/url] and [url=http://w3schools.com/css/pr_border-color.asp]border-color[/url].

Share this post

Link to post
Share on other sites
Thanks , i need lttle more showing please.

I have to change these style attributes. I will have three options (frame option) for the same image.

[code] background: #850 url('wood1.jpg');
border: outset #a50 5px;
float: left;
padding: 30px;
margin: 20px;
background-image: url(store/includes/templates/art_000/images/borders/wood1.jpg);[/code]

What is also diffucult for me to figure out is to use it with the code below which it is a zencart image pop up code.

[code]<div class="pix">
  <!-- popup 1 -->
  // $products_values->fields['products_image']
  echo '<a href="javascript:window.close()">' . zen_image($products_image_large, $products_values->fields['products_name'] . ' ' . TEXT_CLOSE_WINDOW) . '</a>';


I really need someone to explain please as I am still learning php and css.


Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.