Jump to content

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


oavs

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.

Link to comment
Share on other sites

I'm didn't catch all of that, but maybe this example could help:

[code]<html>
<head>
  <title>example</title>
  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;
    }
  </script>
</head>

<body>

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

</body>
</html>[/code]

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].
Link to comment
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 -->
  <?php
  // $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>';
?>
</div>

[/code]

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

Thanks
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.