473,218 Members | 1,392 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,218 software developers and data experts.

Setting styles with InnerHTML!?!

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
Jan 16 '08 #1
8 10036
Delerna
1,134 Expert 1GB
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
ohok thanks ill give it a shot!
Jan 16 '08 #3
still dosnt work :( thanks anyway

anyone?
Jan 16 '08 #4
Delerna
1,134 Expert 1GB
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
WOWA thanks so much Delerna !!!!!!!!!!!
It works like a dream!!!!

Thanks heaps
Ricky
Jan 16 '08 #6
acoder
16,027 Expert Mod 8TB
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
1,134 Expert 1GB
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
16,027 Expert Mod 8TB
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

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

Similar topics

2
by: Kerri | last post by:
Sorry, That was a typo. It should read. I have a RequiredFieldValidator This gets rendered out as a <span> I want to set the innerHTML.
5
by: Soren Vejrum | last post by:
I am working on a web-based html editor using MSIE's designmode and iframes. Everything works just fine, but MSIE changes all my relative "a href" and "img src" links (i.e. "/index.asp") to...
1
by: C A Upsdell | last post by:
I have a site where I am setting a style dynamically, using the JS statement: obj.style.backgroundImage = 'url(img/bak_page.jpg)'; where 'obj' is either document.getElementById(id), or...
4
by: RobG | last post by:
I know you aren't supposed to use innerHTML to mess with table structure, but it seems you can't use it just after a table without damaging the containing element. I added a table to a div using...
3
by: sagar | last post by:
Hello everyone, I am developing a AJAX based IM application. I use javascript to dynamically generated small windows using nested <div> within the web-page. I use the following ways to set...
17
by: PJ | last post by:
Greetings... I have stumbled upon a small problem. I use Ajax to retrieve part of a page I need to update. I update a DIV element with the HTML contents I get from another page. It works...
4
by: Mike | last post by:
Hello, I am trying to change the style(Position of an image) with a function.This code worked a month ago and I dont know what I changed I'm only showing the relevant code. One image is...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.