javascript - dynamisk billed element med checkbox. - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #15047 @ 16.08.09 11:43

Hejsa.

Jeg har lige fået et link til det her script.

Det virker meget fint! Men har nogle ting som skal igennem eller hvad man nu kan sige.

Koden ser sådan her ud.

JScript kode

 <script language='JavaScript' type='text/javascript'>
     function check_value(fieldvalue)
     {    
         switch(fieldvalue)
         {
             case 1:
                 document.getElementById("button1").innerHTML = "<img src='images/button.gif'>";
                     break;
         }
     }
 
 </script>

Og noget HTML:

HTML kode

 <form name='test'>
     <input type="checkbox" name="button1" value="button1" onclick='check_value(1)' style="position:absolut; left: 500px;top: 500pz;">I accept the licens 
 </form>
 
 <div id='button1' class="button1">
 </div>
 </h1>

Meningen er at når den checkbox der bliver markeret viser den et billed. Men det billed og den position har jeg defineret i en .css fil.

Jeg har tidligere i scripter kaldet den fil ind. Og den virker.

Men har disse problemer...

1. Billed har ikke de indstillinger jeg har sat i .css filen. At f.eks. der skal være et billed inde i det og noget tekst inde i det.

2. Når man fjener fluebenet, skal billedet også fjerne sig.

Håber ikke det er for meget, jeg er ikke selv særlig god med Javascript.

- Hilsen,
Magnus.

Indlæg senest redigeret d. 16.08.2009 11:45 af Bruger #15047

Bruger #14855 @ 16.08.09 13:11

Du mener når at der er et flueben så skal der poppe et billed frem?

Bruger #15047 @ 16.08.09 13:38

Ja. Undskyld hvis jeg ikke kun formulere det ordenligt.

Men det gør koden skam også. Men billedet har ikke min CSS elementer på, i eller med sig. Og så mangler jeg nemlig også det modsatte, nemlig når man fjerner fluebenet igen, skal billedet også forsvinde.

- Magnus.

Indlæg senest redigeret d. 16.08.2009 13:39 af Bruger #15047

Bruger #10113 @ 16.08.09 16:11

147

Sådan får du dit billede til også at forsvinde igen:
Koden ser sådan her ud.

JScript kode

 <script language='JavaScript' type='text/javascript'>
 var check=false;
 function check_value() {    
     if (check==false) {
         document.getElementById("button1").innerHTML = "<img src='images/button.gif'>";
         check=true;
     } else {
         document.getElementById("button1").innerHTML = "";
         check=false;
     }
 }
 </script>

Jeg forstår ikke helt dit andet problem, kunne du evt. poste dit CSS.

Bruger #15047 @ 16.08.09 16:22

Jo selvfølgelig kan jeg det.

Du ser den her:

CSS kode

 h1 {
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: black;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: black;
     border-right-width: 1px;
     border-right-style: solid;
     border-right-color: black;
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: black;
     margin: 10px 280px 25px 278px;
     max-height: 425px;
     min-height: 425px;
     font-size: 1.2em;
     font-family: Georgia, "Comic Sanse MS", serif;
 }
 .underlinemenu {
     font-weight: bold;
     width: 100%;
     height: 50px;
 }
 #underlineMenuContent {
     height:800px;
     margin-right: auto;
     margin-left: auto;
     width: 800px;
 }
 
 .underlinemenu{
 font-weight: bold;
 width: 100%;
 }
 
 .underlinemenu ul{
 padding: 6px 0 7px 0;
 margin: 0;
 text-align: center;
 }
 
 .underlinemenu ul li{
 display: inline;
 }
 
 .underlinemenu ul li a{
 color: #494949;
 padding: 6px 3px 4px 3px; 
 margin-right: 20px;
 text-decoration: none;
 border-bottom: 3px solid grey;
 }
 
 /*.underlinemenu ul li a:hover, .underlinemenu ul li a.selected {
     border-bottom-color: black;
 }
 */
 .start {
     background-color: blue;
 }
 
 a.button{
     background:url(img/button.gif);
     display:block;
     color:#555555;
     font-weight:bold;
     height:30px;
     line-height:29px;
     margin-bottom:14px;
     text-decoration:none;
     width:191px;
 }
 
 a.button{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:relative; left: 800px; top: 275px;
 }
 
 a.button1{
 background:url(images/button.gif);
 display:block;
 color:#555555;
 font-weight:bold;
 height:30px;
 line-height:29px;
 margin-bottom:14px;
 text-decoration:none;
 width:191px;
 position:relative; left: 800px; top: 355px;
 }
 
 .next{
     background:url(images/arrow_right.png) no-repeat 10px 8px;
     text-indent: 45px;
     display:block;
 }
 
 .box1 {
 top: 70px;
 left: 50px;
 width:250px;
 height:250px;
 overflow:auto;
 background-color: white;
 }

Og så er der min index.php fil, skal jeg ligge den ind også?

Indlæg senest redigeret d. 16.08.2009 16:23 af Bruger #15047

Bruger #10113 @ 16.08.09 17:58

147

Du giver slet ikke nogen deklerationer til IMG tagget i din CSS, så det er nok derfor at de ikke kommer frem

Bruger #15047 @ 16.08.09 19:10

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <body>
 <center>
 <img src="images/header.jpg">
 </center>
 <link rel="stylesheet" href="background.css" type="text/css" />
 <link rel="stylesheet" href="install.css" type="text/css" />
 <div class="underlinemenu">
 <ul>
 <li><a>Start</a></li>
 <b><li><a>Licens of Use</a></li><b>
 <li><a>Files and Directories</a></li>
 <li><a>MySQL</a></li>
 <li><a>Admin Account</a></li>
 <li><a>Finish</a></li>
 </ul>
 </div>
 <h1>
 <center>
 <?
     echo "I accept the GPL licens and want to continue";
 ?>
 </center>
 <iframe src="licens.txt" width="750px" height="315" style="position:absolute;left:420px;top:310px;">
   <p>Your browser does not support iframes.</p>
 </iframe>
 <script language='JavaScript' type='text/javascript'>
     function check_value(fieldvalue)
     {    
         switch(fieldvalue)
         {
             case 1:
                 document.getElementById("button1").innerHTML = "<img src='images/button.gif'>";
                     break;
         }
     }
 
 </script>
 <form name='test'>
     <input type="checkbox" name="button1" value="button1" onclick='check_value(1)' style="position:absolut; left: 500px;top: 500pz;">I accept the licens 
 </form>
 
 <div id='button1' class="button1">
 </div>
 </h1>
 <center>
 <font size="1">Build 1 - Version 0.0Beta RC1</font>
 <br>
 <img src="images/footer.jpg">
 </center>
 </body>
 </html>

Det er HTML filen.

Hvis jeg ikke brugte Javascriptet, virkede CSS deklarationerne helt fint!

Tror det har noget med at Javascript koden bare sætter billedet ind, som der står i Javascript koden. Den ved jo ikke at der skal være .css til og så videre.

Indlæg senest redigeret d. 16.08.2009 19:11 af Bruger #15047

Bruger #10113 @ 17.08.09 16:00

147

Som jeg sagde før: Du giver ikke nogen deklerationer til img tagget i din CSS, så jeg forstår ikke helt hvad det er du vil have til at ske..

Bruger #15047 @ 17.08.09 18:02

Hmm. Kan være at jeg forvirreret mig selv med det Java der, for det virkede nemlig med positionen før jeg lagde det ind over det hele.

Men siden jeg ikke lige kan se hvor jeg skal identificere CSS, kan du ikke lige gøre det og forklare hvorfor og hvor. Eller give et tip til det.

- Magnus.

Bruger #10113 @ 17.08.09 18:47

147

For at style billedet skal du skrive:

CSS kode

 #button1 img {
      blah..
      blah..
      blah..
 }

Bruger #15047 @ 17.08.09 20:15

Og så bare i stedet for blah.. skal jeg have mine referencer og deklerationer i min .css fil? Bare lige for at se om jeg har forstået det ordenligt.

- Hilsen,
Magnus.

<< < 1 2 > >>

dynamisk billed element med checkbox.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler