Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Setting styles with InnerHTML!?!

Toxinhead's Avatar
Newbie
  
Join Date: Jan 2008
Posts: 4
#1: Jan 16 '08
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

Delerna's Avatar
Expert
  
Join Date: Jan 2008
Location: Sydney
Posts: 788
#2: Jan 16 '08

re: Setting styles with InnerHTML!?!

Quote:

Originally Posted by Toxinhead

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');
Toxinhead's Avatar
Newbie
  
Join Date: Jan 2008
Posts: 4
#3: Jan 16 '08

re: Setting styles with InnerHTML!?!

ohok thanks ill give it a shot!
Toxinhead's Avatar
Newbie
  
Join Date: Jan 2008
Posts: 4
#4: Jan 16 '08

re: Setting styles with InnerHTML!?!

still dosnt work :( thanks anyway

anyone?
Delerna's Avatar
Expert
  
Join Date: Jan 2008
Location: Sydney
Posts: 788
#5: Jan 16 '08

re: Setting styles with InnerHTML!?!

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]
Toxinhead's Avatar
Newbie
  
Join Date: Jan 2008
Posts: 4
#6: Jan 16 '08

re: Setting styles with InnerHTML!?!

WOWA thanks so much Delerna !!!!!!!!!!!
It works like a dream!!!!

Thanks heaps
Ricky
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: Jan 16 '08

re: Setting styles with InnerHTML!?!

Quote:

Originally Posted by Delerna

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.      }
Delerna's Avatar
Expert
  
Join Date: Jan 2008
Location: Sydney
Posts: 788
#8: Jan 18 '08

re: Setting styles with InnerHTML!?!

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#9: Jan 18 '08

re: Setting styles with InnerHTML!?!

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.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,449 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved