Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

changing image border thickness onClick help

Status
Not open for further replies.
cram81

cram81

Technical User
Dec 27, 2003
29
GB
hi

im trying to code my web app so that for this particular section when a user clicks on an image the image is 'highlighted'.
On searching the forums i found a similar question and the sol'n given suggeted a function which changes the border thickness of the image on clicking it....

i also wanted to have a variable which keeps record of what image the user has clicked and i have implemented this part ok... its just when i have added some code to thicken the image border on clicking it nothing seems to happen ...?

is it because i have two functions defined for onClick ? ive never used two before like this so i dont know if its possible..
any advice...?

thanks

my code is:
Code: 
<HTML><HEAD><TITLE>Credential Recovery: Image Authentication</TITLE>
 


<script language='JavaScript'> 
 function submitform(imageid) 
 { 
 document.test.imageid.value = imageid 
 document.test.submit() 
 } 

  function addBorder(imageid) {
	var numimages = 3; 
	for (x=0;x < numimages;x++) {
		document.getElementById("imageid" + x).style.border = '0px';
	}
		document.getElementById(imageid).style.border = '2px solid #ff0010';
}
 </script>

 
 <style type='text/css'> 
 <!-- 
 .cursor {  cursor: hand} 
 --> 
 </style>
</HEAD> 

<BODY><IMG SRC='[URL unfurl="true"]http://localhost:8080/myApp/title.gif'><IMG[/URL] SRC='[URL unfurl="true"]http://localhost:8080/myApp/headerStrip.gif'><BR>[/URL]
<font face='Haettenschweiler' size='+2'>Please Click on the image that you chose when you registered. <BR>  Then click the submit button to complete your selection.</font><BR> <BR>

<form action='[URL unfurl="true"]http://localhost:8080/myApp/servlet/SoundSelect'[/URL] method='post' name='test'> 
<input type='hidden' name='sessionID' value='132'> 
<input type='hidden' name='qTest' value='false'> 
<input type='hidden' name='uID' value='287'> 
<input type='hidden' name='attempts' value='1'> 

<input type='hidden' name='imageid' value=''> 
<TABLE BORDER='3' CELLSPACING='1' CELLPADDING='1'>
<TR>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img5.jpg' style='border:0px' id='image5' class='cursor' alt='5' onclick='submitform(5);addBorder('image5');' width='100' height='100'></TD>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img10.jpg'style='border:0px' id='image10' class='cursor' alt='10' onclick='submitform(10); addBorder('image10');' width='100' height='100'></TD>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img13.jpg'style='border:0px' id='image013' class='cursor' alt='13' onclick='submitform(13); addBorder('image13');' width='100' height='100'></TD>
</TR>

</TABLE> <table width='32%' border='0'><tr><td>&nbsp;</td><td> <div align='center'> <input type='submit' name='submit'  value='submit'></div> </td> <td>&nbsp;</td> </tr> </table></form> 
 
<BR><BR><IMG SRC='[URL unfurl="true"]http://localhost:8080/myApp/crFooter2.gif'[/URL] width='800'></BODY>
<script language="JavaScript">
<!--

window.open = SymRealWinOpen;

//-->
</script>

</HTML>
 
Sort by date Sort by votes
sorry ignore that code it was old ...

Code: 
<HTML><HEAD><TITLE>Credential Recovery: Image Authentication</TITLE>
 


<script language='JavaScript'> 
 function submitform(imageid) 
 { 
 document.test.imageid.value = imageid 
 document.test.submit() 
 } 

  function addBorder(image) {
	var numimages = 14; 
	for (x=0;x < numimages;x++) {
		document.getElementById("image" + x).style.border = '0px';
	}
	document.getElementById(image).style.border = '2px solid #ff0010';
}
 </script>

 
 <style type='text/css'> 
 <!-- 
 .cursor {  cursor: hand} 
 --> 
 </style>
</HEAD> 

<BODY><IMG SRC='[URL unfurl="true"]http://localhost:8080/myApp/title.gif'><IMG[/URL] SRC='[URL unfurl="true"]http://localhost:8080/myApp/headerStrip.gif'><BR>[/URL]
<font face='Haettenschweiler' size='+2'>Please Click on the image that you chose when you registered. <BR>  Then click the submit button to complete your selection.</font><BR> <BR>

<form action='[URL unfurl="true"]http://localhost:8080/myApp/servlet/SoundSelect'[/URL] method='post' name='test'> 
<input type='hidden' name='sessionID' value='132'> 
<input type='hidden' name='qTest' value='false'> 
<input type='hidden' name='uID' value='287'> 
<input type='hidden' name='attempts' value='1'> 

<input type='hidden' name='imageid' value=''> 
<TABLE BORDER='3' CELLSPACING='1' CELLPADDING='1'>
<TR>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img1.jpg' style='border:0px' id='image1' class='cursor' alt='1' onclick='submitform(5); addBorder('image1');' width='100' height='100'></TD>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img2.jpg'style='border:0px' id='image2' class='cursor' alt='2' onclick='submitform(10); addBorder('image2');' width='100' height='100'></TD>
<TD ALIGN = 'center'><img src='C:\mysql\data\mydb\img3.jpg'style='border:0px' id='image3' class='cursor' alt='3' onclick='submitform(13); addBorder('image3');' width='100' height='100'></TD>
</TR>

</TABLE> <table width='32%' border='0'><tr><td>&nbsp;</td><td> <div align='center'> <input type='submit' name='submit'  value='submit'></div> </td> <td>&nbsp;</td> </tr> </table></form> 
 
<BR><BR><IMG SRC='[URL unfurl="true"]http://localhost:8080/myApp/crFooter2.gif'[/URL] width='800'></BODY>
<script language="JavaScript">
<!--

window.open = SymRealWinOpen;

//-->
</script>

</HTML>
 
Upvote 0 Downvote
Looks like your addBorder function is missing a closing }. Are you getting any errors?


Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
i couldnt see a missing brace?

theres one for the function declaration and one for the for loop?

i havnt recieved any errors either...maybe because the images are in the table it may be preventing me from seeing the border ??
 
Upvote 0 Downvote
You're right, my mistake about the }.

Are you sure you don't have a little yellow icon in your status bar? It errored for me right away on this line:
Code: 
onclick='submitform(5); addBorder('image1');'

You're using single quotes inside of single quotes. You should change it to be like this:
Code: 
onclick="submitform(5); addBorder('image1');"
[b]Or like this[/b]
onclick='submitform(5); addBorder("image1");'
[b]Or like this[/b]
onclick='submitform(5); addBorder(\'image1\');'
[b]Or like this[/b]
onclick="submitform(5); addBorder(\"image1\");"

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
326
feherke
feherke
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
595
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
325
gmmastros
gmmastros
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
641
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
323
Smurfmania
Smurfmania

Part and Inventory Search

Sponsor

Back
Top