oavs Posted September 30, 2006 Share Posted September 30, 2006 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 https://forums.phpfreaks.com/topic/22586-how-do-you-do-image-border-with-ability-to-cange-color-at-will/ Share on other sites More sharing options...
FrOzeN Posted September 30, 2006 Share Posted September 30, 2006 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 https://forums.phpfreaks.com/topic/22586-how-do-you-do-image-border-with-ability-to-cange-color-at-will/#findComment-101344 Share on other sites More sharing options...
oavs Posted October 3, 2006 Author Share Posted October 3, 2006 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 https://forums.phpfreaks.com/topic/22586-how-do-you-do-image-border-with-ability-to-cange-color-at-will/#findComment-102908 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.