/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Javascript to create a border around images

Copy linkTweet thisAlerts:
Nov 28.2007

Does anyone know how on earth I could attempt this? ?

Add Javascript to the web page to create a thick border
around each image when a button is pressed. Add another button which when pressed
clears the border. 😮

to post a comment
JavaScript

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooNov 28.2007 — To prevent the images from 'twitching' I would give them a transparent border by default and set a border-color when you select the border 'on' button.

You can collect all the images with getElementsByTagName('img') and loop through them individually. Or you can edit a style sheet and replace the img selector's rule(s).
Copy linkTweet thisAlerts:
@talksrauthorNov 28.2007 — Thanks for your reply.

I would prefer to create a stylesheet for this page with a

style defined for the 'img' tag. ?
Copy linkTweet thisAlerts:
@nap0leonNov 30.2007 — In the example below, when "Turn Borders ON" is clicked, the SetClass function locates the element on the page with ID="someID" and sets the class of that DIV to "borders_on".

create 2 classes in your CSS file

(this example sets the border to white to match the page background color)
[CODE].borders_off{border:1px solid #FFFFFF;}
.borders_on{border:1px solid #000000;}[/CODE]

create a javascript function
[CODE]function SetClass(classname, imgID){
var Element=document.getElementById(imgID);
Element.class=classname;
}
[/CODE]

create an image on your page
[CODE]<img src="picture.gif" class="borders_off" id="someID"/>[/CODE]

create 2 links
[CODE]<a href="javascript:SetClass('borders_on','someID');>Turn Borders ON</a>
<br/><a href="javascript:SetClass('borders_off','someID');>Turn Borders OFF</a> [/CODE]
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — Thank you for your reply.

I have given what you said a go, but the boarder is not showing. this is what I have done:

[code=html]<!-- index.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Coursework</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-color: #FF0000;
}
-->
</style>
</head>
<script>
function SetClass(classname, imgID){
var Element=document.getElementById(imgID);
Element.class=classname;
}
</script>


<body>

<img src="picture.gif" class="borders_off" id="someID"/>

<a href="javascript:SetClass('borders_on','someID');>Turn Borders ON</a>
<br/><a href="javascript:SetClass('borders_off','someID');>Turn Borders OFF</a>
</body>
</html>
[/code]

[CODE]/* CSS Document */

.subtitle1 {
color: #000000;
}

.subtitle2 {
color: #000000;
}

.borders_off{border:1px solid #FFFFFF;}
.borders_on{border:1px solid #000000;}[/CODE]
Copy linkTweet thisAlerts:
@FangDec 02.2007 — &lt;script [COLOR="Red"]type="text/javascript"[/COLOR]&gt;
function SetClass(classname, imgID){
var Element=document.getElementById(imgID);
Element.[COLOR="Red"]className[/COLOR]=classname;
}
&lt;/script&gt;


&lt;body&gt;

&lt;img src="picture.gif" class="borders_off" id="someID"/&gt;

&lt;a href="javascript:SetClass('borders_on','someID');[COLOR="Red"]"[/COLOR]&gt;Turn Borders ON&lt;/a&gt;
&lt;br/&gt;&lt;a href="javascript:SetClass('borders_off','someID');[COLOR="Red"]"[/COLOR]&gt;Turn Borders OFF&lt;/a&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — Thanks for the help it worked well.

But when I add another picture picture2.gif, it only adds a border to the first gif. Why is this?

Here is the code..

[code=html]<!-- index.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Coursework</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">


<script type="text/javascript">
function SetClass(classname, imgID){
var Element=document.getElementById(imgID);
Element.className=classname;
}
</script>


<body>

<p><img src="picture.gif" class="borders_off" id="someID"/>
<br>
<p><img src="picture2.gif" class="borders_off" id="someID"/></p>
<p>
<a href="javascript:SetClass('borders_on','someID');">Turn Borders ON</a>
<br/>
<a href="javascript:SetClass('borders_off','someID');">Turn Borders OFF</a>
</p>
</body>
</body>
</html>
[/code]

[CODE]/* CSS Document */

.subtitle1 {
color: #000000;
}

.subtitle2 {
color: #000000;
}

.borders_off{border:1px solid #FFFFFF;}
.borders_on{border:1px solid #000000;}[/CODE]
Copy linkTweet thisAlerts:
@FangDec 02.2007 — ID must be unique. Reference the image you wish to change.
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — Ok I have changed the id but how do you reference?
Copy linkTweet thisAlerts:
@FangDec 02.2007 — By passing the relevant ID in [I]SetClass('borders_on','[COLOR="SeaGreen"]someID[/COLOR]');[/I]
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — By passing the relevant ID in [I]SetClass('borders_on','[COLOR="SeaGreen"]someID[/COLOR]');[/I][/QUOTE]


I did this but it still does not work:

[code=html]

<p><img src="picture.gif" class="borders_off" id="someID"/>
<br>
<p><img src="picture2.gif" class="borders_off" id="someID2"/></p>
<p>
<a href="javascript:SetClass('borders_on','someID', 'someID2');">Turn Borders ON</a>
<br/>
<a href="javascript:SetClass('borders_off','someID', 'someID2');">Turn Borders OFF</a>
[/code]
Copy linkTweet thisAlerts:
@FangDec 02.2007 — The previous solution was for 1 image not for any number of images.
function SetClass(){
for (var i=1, el; el = document.getElementById(arguments[i]); i++) {
el.className=arguments[0];
} <br/>
}
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — Thanks, I see what you mean. Is there anyway that I could make the borders larger.

Thanks for your help.?
Copy linkTweet thisAlerts:
@FangDec 02.2007 — [I].borders_off{border:[COLOR="Red"]1[/COLOR]px solid #FFFFFF;}[/I]

http://www.w3schools.com/css/css_border.asp
Copy linkTweet thisAlerts:
@talksrauthorDec 02.2007 — Ah i see, just need to change the px value and also the # value if I need a colour change.

Thanks for all of your help you have been very useful. ?
×

Success!

Help @talksr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...