Jump to content


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

  • Please log in to reply
2 replies to this topic

#1 oavs

  • Members
  • PipPipPip
  • Advanced Member
  • 56 posts
  • LocationDownunder

Posted 30 September 2006 - 11:42 AM

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. http://www.arthq.com...ge=products_new

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.

#2 FrOzeN

  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 30 September 2006 - 12:45 PM

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 w3schools for border-width, border-style and border-color.

#3 oavs

  • Members
  • PipPipPip
  • Advanced Member
  • 56 posts
  • LocationDownunder

Posted 03 October 2006 - 08:23 AM

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.

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);

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.

<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.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users