By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,446 Members | 3,019 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,446 IT Pros & Developers. It's quick & easy.

Setting styles with InnerHTML!?!

Toxinhead
P: 4
Hey there guys

I am having a little trouble with InnerHTML as i can't seem to figure out how to set the style of my div tag.....
What im trying to do is that when i rollover pic1 it changes that pic and displays:block and visiblity:visible....and also changes pic2..

When the webpage is loaded it displays:none and visivlity:hidden also

Heres my code:

Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <head>
  3. <script type="text/javascript">
  4. function start(){
  5.     document.getElementById('pic1').src="icons/on1.jpg";
  6.     document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";
  7.     document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";
  8.     document.getElementById("pic2").src="icons/off2.jpg";
  9.      }
  10.  
  11. function one1(){
  12.     document.getElementById('pic1').src="icons/on1.jpg";
  13.     document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";
  14.     document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";
  15.     document.getElementById("pic2").src="icons/off2.jpg";
  16.      }
  17. function two2(){
  18.     document.getElementById('pic1').src="icons/off1.jpg";
  19.     document.getElementById('aa').innerHTML = "<div style=visibility:hidden; display:none;>";
  20.     document.getElementById("bb").innerHTML = "<div style=visibility:visible; display:block;>";
  21.     document.getElementById("pic2").src="icons/on2.jpg";
  22.      }
  23. </script>
  24. <style type="text/css">
  25. #aa  { visibility:hidden; display:none;}
  26. #bb  { visibility:hidden; display:none;}
  27. </style>
  28. </head>
  29. <body onLoad="start()";>
  30.  
  31.  
  32. <div id="aa"> 
  33. bla bla bla bla bla bla
  34. </div>
  35. <div id="bb"> 
  36. da da da da da da da da da da da
  37. </div>
  38.  
  39.  
  40. <img id="pic1" src="icons/off1.jpg" width="50" height="50" onMouseOver="one1()"/><br />
  41. <img id="pic2" src="icons/off2.jpg" width="50" height="50" onMouseOver="two2()"/><br />
  42. </body>
  43. </html>
  44.  
Please help !!!!! i just need to find out how to change the style to invisibility:visible and display:block through the innerHTML!!!!

Thanks a million!!
Ricky
Jan 16 '08 #1
Share this Question
Share on Google+
8 Replies


Delerna
Expert 100+
P: 1,134
Hey there guys

I am having a little trouble with InnerHTML as i can't seem to figure out how to set the style of my div tag.....
What im trying to do is that when i rollover pic1 it changes that pic and displays:block and visiblity:visible....and also changes pic2..

When the webpage is loaded it displays:none and visivlity:hidden also

Heres my code:

Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <head>
  3. <script type="text/javascript">
  4. function start(){
  5.     document.getElementById('pic1').src="icons/on1.jpg";
  6.     document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";
  7.     document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";
  8.     document.getElementById("pic2").src="icons/off2.jpg";
  9.      }
  10.  
  11. function one1(){
  12.     document.getElementById('pic1').src="icons/on1.jpg";
  13.     document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";
  14.     document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";
  15.     document.getElementById("pic2").src="icons/off2.jpg";
  16.      }
  17. function two2(){
  18.     document.getElementById('pic1').src="icons/off1.jpg";
  19.     document.getElementById('aa').innerHTML = "<div style=visibility:hidden; display:none;>";
  20.     document.getElementById("bb").innerHTML = "<div style=visibility:visible; display:block;>";
  21.     document.getElementById("pic2").src="icons/on2.jpg";
  22.      }
  23. </script>
  24. <style type="text/css">
  25. #aa  { visibility:hidden; display:none;}
  26. #bb  { visibility:hidden; display:none;}
  27. </style>
  28. </head>
  29. <body onLoad="start()";>
  30.  
  31.  
  32. <div id="aa"> 
  33. bla bla bla bla bla bla
  34. </div>
  35. <div id="bb"> 
  36. da da da da da da da da da da da
  37. </div>
  38.  
  39.  
  40. <img id="pic1" src="icons/off1.jpg" width="50" height="50" onMouseOver="one1()"/><br />
  41. <img id="pic2" src="icons/off2.jpg" width="50" height="50" onMouseOver="two2()"/><br />
  42. </body>
  43. </html>
  44.  
Please help !!!!! i just need to find out how to change the style to invisibility:visible and display:block through the innerHTML!!!!

Thanks a million!!
Ricky
Ricky, try something like this
var obj=document.getElementById('IDOfYourObject')

obj.setAttribute('align','right');
obj.setAttribute('visibility','visible');
Jan 16 '08 #2

Toxinhead
P: 4
ohok thanks ill give it a shot!
Jan 16 '08 #3

Toxinhead
P: 4
still dosnt work :( thanks anyway

anyone?
Jan 16 '08 #4

Delerna
Expert 100+
P: 1,134
OK, then I think this is what you are trying to do


[HTML]<html>
<head>
<script type="text/javascript">
function start(){
document.getElementById('pic1').src="icons/on1.jpg";
document.all.aa.style.visibility = "visible";
document.all.bb.style.visibility = "hidden";
document.getElementById("pic2").src="icons/off2.jpg";
}

function one1(){
document.getElementById('pic1').src="icons/on1.jpg";
document.all.aa.style.visibility = "visible";
document.all.bb.style.visibility = "hidden";
document.getElementById("pic2").src="icons/off2.jpg";
}
function two2(){
document.getElementById('pic1').src="icons/off1.jpg";
document.all.bb.style.visibility = "visible";
document.all.aa.style.visibility = "hidden";
document.getElementById("pic2").src="icons/on2.jpg";
}
</script>

</head>
<body onLoad="start()">
<img id="pic1" src="icons/off1.jpg" width="50" height="50" onMouseOver="one1()"/><br />
<img id="pic2" src="icons/off2.jpg" width="50" height="50" onMouseOver="two2()"/><br />
<div id="aa">bla bla bla bla bla bla</div>
<div id="bb"> da da da da da da da da da da da</div>

</body>
</html>[/HTML]
Jan 16 '08 #5

Toxinhead
P: 4
WOWA thanks so much Delerna !!!!!!!!!!!
It works like a dream!!!!

Thanks heaps
Ricky
Jan 16 '08 #6

acoder
Expert Mod 15k+
P: 16,027
Expand|Select|Wrap|Line Numbers
  1. function start(){
  2.     document.getElementById('pic1').src="icons/on1.jpg";
  3.     document.all.aa.style.visibility = "visible";
  4.     document.all.bb.style.visibility = "hidden";
  5.     document.getElementById("pic2").src="icons/off2.jpg";
  6.      }
That won't work in most browsers. Don't use document.all. Use document.getElementById instead, so your function becomes:
Expand|Select|Wrap|Line Numbers
  1. function start(){
  2.     document.getElementById('pic1').src="icons/on1.jpg";
  3.     document.getElementById("aa").style.visibility = "visible";
  4.     document.getElementById("bb").style.visibility = "hidden";
  5.     document.getElementById("pic2").src="icons/off2.jpg";
  6.      }
Jan 16 '08 #7

Delerna
Expert 100+
P: 1,134
Quite right, thanks acoder
in my job, everything i develop only ever gets used in IE so i am a bit weak and a bit lazy in that area
Jan 18 '08 #8

acoder
Expert Mod 15k+
P: 16,027
No problem. It's never a bad habit to follow standards and then adjust for IE's bugs/quirks. It'll be useful when you're required to support more browsers.
Jan 18 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.