I wrote a cod for a simple image gallery, but functions don't work properly. When i put a real id into and document.getElementById(pic_id).style.textDecoration = 'none'; document.getElementById(pic_t_id).style.border="1px solid black"; Code (markup): it works. It must be simple. What is the problem? The code is <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title> Gallery </title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> <!-- function change_picAndSpan(pic_name, pic_title_id){ document.getElementById('main_pic').src = pic_name; var pic_id = "'" + pic_title_id + "'"; var pic_t_id = "'"+pic_title_id+"b"+"'"; document.getElementById(pic_id).style.textDecoration = 'underline'; document.getElementById(pic_t_id).style.border="1px solid white"; } function RemoveUnderline (pic_title_id) { var pic_id = "'" + pic_title_id + "'"; var pic_t_id = "'"+pic_title_id+"b"+"'"; document.getElementById(pic_id).style.textDecoration = 'none'; document.getElementById(pic_t_id).style.border="1px solid black"; } //--> </script> </head> <body> <div id="wrapper"> <!-- /wrapper --> <div id="container"> <!-- container --> <h1>Image Gallery</h1> <div id="pictures"> <!-- pictures --> <img id="pic1b" src="1b.jpg" width="140" height="105" alt="" onmouseover="change_picAndSpan('01.jpg','pic1')" onMouseout="RemoveUnderline('pic1')" /> <img id="pic2b" src="2b.jpg" width="140" height="105" alt="" onmouseover="change_picAndSpan('02.jpg','pic2')" onMouseout="RemoveUnderline('pic2')" /> <img id="pic3b" src="3b.jpg" width="140" height="105" alt="" onmouseover="change_picAndSpan('03.jpg','pic3')" onMouseout="RemoveUnderline('pic3')" /> <img id="pic4b" src="4b.jpg" width="140" height="105" alt="" onmouseover="change_picAndSpan('04.jpg','pic4')" onMouseout="RemoveUnderline('pic4')" /> <img id="pic5b" src="1b.jpg" width="140" height="105" alt="" onmouseover="change_picAndSpan('01.jpg','pic5')" onMouseout="RemoveUnderline('pic5')" /> <br /> </div> <!-- pictures --> <div id="pic_names"> <!-- pic_names --> <span id="pic1">Pic1</span> <span id="pic2">Pic2</span> <span id="pic3">Pic3</span> <span id="pic4">Pic4</span> <span id="pic5" style="margin-right:0">Pic5</span> </div> <!-- /pic_names --> <p id="main_picture"> <img src="01.jpg" width="560" height="420" alt="" id="main_pic"/> <h3 id="h3">Buy photo</h3> </p> </div> <!-- /container --> <div id="bg_control"> <!-- bg_control --> <div style="background-color:#000000"></div> <div style="background-color:#D4D4D4"></div> <div style="background-color:#0104B3"></div> <div style="background-color:#A50100"></div> <div style="background-color:#058A0A"></div> </div> <!-- /bg_control --> </div> <!-- /wrapper --> </body> </html> Code (markup):
Try it function change_picAndSpan(pic_name, pic_title_id){ document.getElementById('main_pic').src = pic_name; var pic_id = pic_title_id; var pic_t_id = pic_title_id+"b"; document.getElementById(pic_id).style.textDecoration = 'underline'; document.getElementById(pic_t_id).style.border="1px solid white"; } function RemoveUnderline (pic_title_id) { var pic_id = pic_title_id; var pic_t_id = pic_title_id+"b"; document.getElementById(pic_id).style.textDecoration = 'none'; document.getElementById(pic_t_id).style.border="1px solid black"; } Code (markup):