Setting styles with InnerHTML!?!

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

 
<html> 

<head>

<script type="text/javascript">

function start(){

    document.getElementById('pic1').src="icons/on1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("pic2").src="icons/off2.jpg";

     }
 
function one1(){

    document.getElementById('pic1').src="icons/on1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("pic2").src="icons/off2.jpg";

     }

function two2(){

    document.getElementById('pic1').src="icons/off1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("pic2").src="icons/on2.jpg";

     }

</script>

<style type="text/css">

#aa  { visibility:hidden; display:none;}

#bb  { visibility:hidden; display:none;}

</style>

</head>

<body onLoad="start()";>
 
<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>
 
<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 />

</body>

</html>

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

Subscribe Post Reply

10059

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

<html>

<head>

<script type="text/javascript">

function start(){

    document.getElementById('pic1').src="icons/on1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("pic2").src="icons/off2.jpg";

     }

function one1(){

    document.getElementById('pic1').src="icons/on1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("pic2").src="icons/off2.jpg";

     }

function two2(){

    document.getElementById('pic1').src="icons/off1.jpg";

    document.getElementById('aa').innerHTML = "<div style=visibility:hidden; display:none;>";

    document.getElementById("bb").innerHTML = "<div style=visibility:visible; display:block;>";

    document.getElementById("pic2").src="icons/on2.jpg";

     }

</script>

<style type="text/css">

#aa  { visibility:hidden; display:none;}

#bb  { visibility:hidden; display:none;}

</style>

</head>

<body onLoad="start()";>

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

<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 />

</body>

</html>

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

ohok thanks ill give it a shot!

Jan 16 '08 #3

Toxinhead

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

Toxinhead

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

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";

     }

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

 function start(){

    document.getElementById('pic1').src="icons/on1.jpg";

    document.getElementById("aa").style.visibility = "visible";

    document.getElementById("bb").style.visibility = "hidden";

    document.getElementById("pic2").src="icons/off2.jpg";

     }

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

Similar topics

Setting the innerHTML on a <span>

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.

ASP / Active Server Pages

Problem: Setting MSIE iframe innerHTML change relative href/src to absolute href/src

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

Javascript

Setting styles dynamically only for @media screen

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

HTML / CSS

innerHTML and tables...

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

Javascript

setting styles & attributes dynamically

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

Javascript

innerHTML and SCRIPT tag

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

Javascript

Setting styles with JS

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

Javascript

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware