Avatar billede a55830 Praktikant
08. november 2008 - 11:28 Der er 33 kommentarer og
1 løsning

ændre script til at bruge MySQL

jeg har dette script , men jeg ville kerne lave det om så det brugte MySQL til at hente menuen og teksten , er der en der kan det eller har løsningen med et andet script.

her er det jeg har



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

var linktext=new Array()
linktext[0]='<table border="0" width="210" height="185" bgcolor="#EFEFEF" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>This is really kind of amazing.</b></font></td></tr></table>'
linktext[1]='<table border="0" width="210" height="185" bgcolor="#D1FD80" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>You can have as many links as you wish.</b></font></td></tr></table>'
linktext[2]='<table border="0" width="210" height="185" bgcolor="#FDB9FD" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>This would be great to describe where the visitor is goin on your site.</b></font></td></tr></table>'
linktext[3]='<table border="0" width="210" height="185" bgcolor="#FFFF5E" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>Maybe the link is not too descriptive -- this should make it easier.</b></font></td></tr></table>'
linktext[4]='<table border="0" width="210" height="185" bgcolor="#C2D7FC" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>Try it out!</b></font></td></tr></table>'
linktext[5]='<table border="0" width="210" height="185" bgcolor="#C2D7FC" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>Try it out now!</b></font></td></tr></table>'

var ns6=document.getElementById&&!document.all
var ie=document.all
function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext] }
function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML='<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="0" cellspacing="8"><tr><td valign="top"><font face="arial" size="4"><b>place your cursor over the links on the left for a description to appear here.<p>click on the link to visit the page</b></font></td></tr></table>'
else if (ns6) document.getElementById(whichdiv).innerHTML='<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>place your cursor over the links on the left for a description to appear here.<p>click on the link to visit the page</b></font></td></tr></table>'}
//  End -->
</script>

</HEAD>
<BODY>

<table border="0" width="370" bgcolor="black" cellpadding="3" cellspacing="0" align="center">
<tr><td>

<table border="0" background="stuff/index_background.gif" width="370" cellpadding="0" cellspacing="0">
<tr><td>

<table border="0" width="160" bgcolor="#F88530" cellpadding="8" cellspacing="0">
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onmouseover="bgColor='#EFEFEF'; show_text(0,'div1')" onmouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Try this link</b></font></td>
</tr>
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onMouseover="bgColor='#D1FD80'; show_text(1,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Or another</b></font></td>
</tr>
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onMouseover="bgColor='#FDB9FD'; show_text(2,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Our favorite</b></font></td>
</tr>
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onMouseover="bgColor='#FFFF5E'; show_text(3,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Good site!</b></font></td>
</tr>
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onMouseover="bgColor='#C2D7FC'; show_text(4,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Go here</b></font></td>
</tr>
<tr>
  <td onclick="window.location='http://javascript.internet.com'" onMouseover="bgColor='#C2D7FC'; show_text(5,'div1')" onMouseout="bgColor='#F88530'; reset('div1')" style="cursor:pointer; cursor:hand"><font face="arial" size="4"><b>Go here now!</b></font></td>
</tr>
</table>

</td>
<td>
<span id="div1"><table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>place your cursor over the links on the left for a description to appear here.<br><br>click on the link to visit the page</b></font></td></tr></table></span>
</td>
</tr>
</table>

</td>
</tr>
</table>
Avatar billede a55830 Praktikant
08. november 2008 - 11:31 #1
her er et link til scriptet : www.blueeye.dk/ddha/menu_test_u.php
Avatar billede w13 Novice
08. november 2008 - 11:54 #2
Har du erfaring med at bruge PHP eller mySQL?
Avatar billede a55830 Praktikant
08. november 2008 - 11:56 #3
ja lidt men absolute ikke nok til at ændre dette jeg er igang men det bliver let uoverskueligt
Avatar billede w13 Novice
08. november 2008 - 11:57 #4
Du ville i øvrigt kunne lave din kode rigtig meget kortere og mere hensigtsmæssig, hvis du bruge div-elementer i stedet for table-elementer, og hvis du kun ændrede teksten og ikke som nu satte hele table-elementer ind med innerHTML, som jo i øvrigt heller ikke er valid i nogen standard.
Avatar billede w13 Novice
08. november 2008 - 12:00 #5
Hvordan ville du oprette forbindelse til din database så? (Bare erstat kode o.lign. med "***".)
Avatar billede a55830 Praktikant
08. november 2008 - 12:08 #6
<?php

$con = mysql_connect("localhost","xxxxxxx","xxxxxxxx");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("ddha", $con);

$sql = mysql_query("SELECT * FROM tilbud ORDER BY nr");

while($row = mysql_fetch_array($sql))
{
Avatar billede w13 Novice
08. november 2008 - 12:30 #7
Og hvordan ligger det så i databasen, de ting, der skal hentes?
Avatar billede a55830 Praktikant
08. november 2008 - 12:34 #8
teksten ligger i "indhold"
menú ligger i "menu"
og de har et nummer "nr"
Avatar billede w13 Novice
08. november 2008 - 12:59 #9
Det forstår jeg ikke lige.

Du har altså tabellen "indhold" og tabellen "menu", som jeg forstår det, og hvilke felter er der i disse?
Avatar billede w13 Novice
08. november 2008 - 13:06 #10
Uden databasekoden har jeg skrevet din kode om til:

menu.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       
        <link type="text/css" rel="stylesheet" href="menu.css">
       
        <script type="text/javascript" src="menu.js"></script>
       
    </head>
    <body onload="iniMenu()">
       
        <div id="container">
           
            <div id="leftcell">
               
                <div onmouseover="var sCol = '#efefef'; changeBG(this, sCol); showText(1, sCol)" onmouseout="changeBG(this); hideText(1)">Try this link</div>
                <div onmouseover="var sCol = '#d1fd80'; changeBG(this, sCol); showText(2, sCol)" onmouseout="changeBG(this); hideText(2)">Or another</div>
                <div onmouseover="var sCol = '#fdb9fd'; changeBG(this, sCol); showText(3, sCol)" onmouseout="changeBG(this); hideText(3)">Our favorite</div>
                <div onmouseover="var sCol = '#ffff5e'; changeBG(this, sCol); showText(4, sCol)" onmouseout="changeBG(this); hideText(4)">Good site!</div>
                <div onmouseover="var sCol = '#c2d7fc'; changeBG(this, sCol); showText(5, sCol)" onmouseout="changeBG(this); hideText(5)">Go here</div>
                <div onmouseover="var sCol = '#c2d7fc'; changeBG(this, sCol); showText(6, sCol)" onmouseout="changeBG(this); hideText(6)">Go here now!</div>
               
            </div>
           
            <div id="rightcell">
               
                <p>
                    place your cursor over the links on the left for a description to appear here.
                    <br><br>                   
                    click on the link to visit the page
                </p>
                <p style="display:none">
                    This is really kind of amazing!
                </p>
                <p style="display:none">
                    You can have as many links as you wish.
                </p>
                <p style="display:none">
                    This would be great to describe where the visitor is going on your site.
                </p>
                <p style="display:none">
                    Maybe the link is not too descriptive - this would make it easier.
                </p>
                <p style="display:none">
                    Try it out!
                </p>
                <p style="display:none">
                    Try it out now!
                </p>
               
            </div>
        </div>
       
    </body>
</html>

menu.css:

#container {
    width:382px;
    margin:auto;
    font-family:arial,sans-serif;
    font-size:18px;
    font-weight:bold;
}

#leftcell {
    float:left;
    width:163px;
    background-color:#f88530;
    border:3px solid #000;
    border-right:0;
}

#leftcell div {
    padding:8px 5px;
}

#rightcell {
    float:left;
    width:203px;
    padding:5px;
    background-color:#f88530;
    border:0 solid #000;
    border-width:20px 3px 20px 0;
}

menu.js:

function changeBG(o, sCol) {
    o.style.backgroundColor = !sCol ? "#f88530" : sCol;
}

function showText(iText, sCol) {
    var o = document.getElementById("rightcell");
    o.style.backgroundColor = sCol;
    o.getElementsByTagName("p")[0].style.display = "none";
    o.getElementsByTagName("p")[iText].style.display = "block";
}

function hideText(iText) {
    var o = document.getElementById("rightcell");
    o.style.backgroundColor = "#f88530";
    o.getElementsByTagName("p")[iText].style.display = "none";
    o.getElementsByTagName("p")[0].style.display = "block";
}

function iniMenu() {
    document.getElementById("rightcell").style.height = document.getElementById("leftcell").offsetHeight - 50 + "px";
}
Avatar billede w13 Novice
08. november 2008 - 13:06 #11
Det er langt mere moderne kode og fordi noget af koden ligger i menu.css og noget andet i menu.js, bliver selve HTML-filen meget kortere og nemmere at overskue.
Avatar billede a55830 Praktikant
08. november 2008 - 13:06 #12
det er ikke tabeller
tabellen er "tilbud"
som indeholder felterne
- indhold
- menu
- nr
Avatar billede w13 Novice
08. november 2008 - 13:15 #13
Ok. Men der er vel også brug for et felt til den farve, der skal vises, når musen holdes over?
Avatar billede a55830 Praktikant
08. november 2008 - 13:18 #14
farven er ikke vigtig , den skal fjernes senere alligevel
Avatar billede w13 Novice
08. november 2008 - 13:19 #15
Ok. Skal der så kun være én farve, når man holder musen over et menupunkt, eller skal der slet ikke være nogen?
Avatar billede a55830 Praktikant
08. november 2008 - 13:29 #16
ikke nogen farver
menuen skal være lige som den her www.blueeye.dk/ddha1/u_tilbud.php
Avatar billede w13 Novice
08. november 2008 - 13:42 #17
Nåh ok. Så bliver det meget nemmere. God kode er jo skrevet til formålet, så derfor skal vi ikke have en masse kode til at skifte baggrund eller til at style kasserne, så de ser ud som på dit første eksempel.
Avatar billede w13 Novice
08. november 2008 - 13:43 #18
menu.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       
        <link type="text/css" rel="stylesheet" href="menu.css">
       
        <script type="text/javascript" src="menu.js"></script>
       
    </head>
    <body>
       
        <div id="container">
           
            <div id="leftcell">
               
                <div onmouseover="showText(1)" onmouseout="hideText(1)">Try this link</div>
                <div onmouseover="showText(2)" onmouseout="hideText(2)">Or another</div>
                <div onmouseover="showText(3)" onmouseout="hideText(3)">Our favorite</div>
                <div onmouseover="showText(4)" onmouseout="hideText(4)">Good site!</div>
                <div onmouseover="showText(5)" onmouseout="hideText(5)">Go here</div>
                <div onmouseover="showText(6)" onmouseout="hideText(6)">Go here now!</div>
               
            </div>
           
            <div id="rightcell">
               
                <p>
                    place your cursor over the links on the left for a description to appear here.
                    <br><br>                   
                    click on the link to visit the page
                </p>
               
                <p style="display:none">
                    This is really kind of amazing!
                </p>
               
                <p style="display:none">
                    You can have as many links as you wish.
                </p>
               
                <p style="display:none">
                    This would be great to describe where the visitor is going on your site.
                </p>
               
                <p style="display:none">
                    Maybe the link is not too descriptive - this would make it easier.
                </p>
               
                <p style="display:none">
                    Try it out!
                </p>
               
                <p style="display:none">
                    Try it out now!
                </p>
               
            </div>
           
        </div>
       
    </body>
</html>

menu.css:

#leftcell {
    float:left;
    width:163px;
}

#leftcell div {
    padding:8px 5px;
}

menu.js:

function showText(iText, sCol) {
    var o = document.getElementById("rightcell");
    o.getElementsByTagName("p")[0].style.display = "none";
    o.getElementsByTagName("p")[iText].style.display = "block";
}

function hideText(iText) {
    var o = document.getElementById("rightcell");
    o.getElementsByTagName("p")[iText].style.display = "none";
    o.getElementsByTagName("p")[0].style.display = "block";
}
Avatar billede w13 Novice
08. november 2008 - 13:49 #19
Og her er menu.htm med PHP-koden. Bemærk i øvrigt at jeg skriver "menu" eller "indhold" i stedet for bare "*" i SQL-sætningen, hvilket giver bedre performance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       
        <link type="text/css" rel="stylesheet" href="menu.css">
       
        <script type="text/javascript" src="menu.js"></script>
       
    </head>
    <body>
       
        <div id="container">
           
            <div id="leftcell">
               
                <?php
               
                $con = mysql_connect("localhost","xxxxxxx","xxxxxxxx") or die('Could not connect: ' . mysql_error());
                mysql_select_db("ddha", $con);
               
                $sql = mysql_query("SELECT menu FROM tilbud ORDER BY nr");
               
                $i = 0;
                while($row = mysql_fetch_array($sql))
                {
                    $i++;
                   
                    echo '<div onmouseover="showText(' . $i . ')" onmouseout="hideText(' . $i . ')">' . $row['menu'] . '</div>\n';
                   
                }
                ?>
               
            </div>
           
            <div id="rightcell">
               
                <p>
                    place your cursor over the links on the left for a description to appear here.
                    <br><br>                   
                    click on the link to visit the page
                </p>
               
                <?php
               
                $sql = mysql_query("SELECT indhold FROM tilbud ORDER BY nr");
               
                $i = 0;
                while($row = mysql_fetch_array($sql))
                {
                    $i++;
                   
                    echo '<p style="display:none">' . $row['indhold'] . '</p>\n';
                   
                }
                ?>
               
            </div>
           
        </div>
       
    </body>
</html>
Avatar billede w13 Novice
08. november 2008 - 13:49 #20
Dog utestet.
Avatar billede a55830 Praktikant
08. november 2008 - 13:58 #21
er er det der er skrevet http://blueeye.dk/ddha/u_tilbud_test4.php

men den skriver /n ???
Avatar billede w13 Novice
08. november 2008 - 13:59 #22
Så fjerner du bare \n de 2 steder i min kode, hvor det står.
Avatar billede w13 Novice
08. november 2008 - 14:00 #23
echo '<p style="display:none">' . $row['indhold'] . '</p>\n';

skal i øvrigt nok være:

echo '<p style="display:none">' . nl2br($row['indhold']) . '</p>';

for at linjeskift erstattes med <br> i HTML-koden.
Avatar billede a55830 Praktikant
08. november 2008 - 14:05 #24
det er super
men når der står meget text så ser det underligt ud
Avatar billede w13 Novice
08. november 2008 - 14:06 #25
Ja, det er fordi det når ned under menuen.

Hvis du i CSS-koden sætter en margin-left på rightcell, der er samme antal px som bredden på leftcell, så skulle det vist virke.
Avatar billede w13 Novice
08. november 2008 - 14:07 #26
F.eks. rette:

#leftcell {
    float:left;
    width:163px;
}

#leftcell div {
    padding:8px 5px;
}

til:

#leftcell {
    float:left;
    width:163px;
}

#leftcell div {
    padding:8px 5px;
}

#rightcell {
    margin-left:163px;
}
Avatar billede w13 Novice
08. november 2008 - 14:07 #27
:)
Avatar billede w13 Novice
08. november 2008 - 14:09 #28
I øvrigt behøver du ikke erstatte alle æ, ø og å med f.eks. &aelig;, &oslash; og &aring; hvis bare du angiver et tegnsæt.

Du får nemlig hurtigt problemer, hvis du gør som nu.
Avatar billede a55830 Praktikant
08. november 2008 - 14:11 #29
jet har sat det til utf8 men der sker underlige ting , jeg bruger en mac til at lave siden på men i IE viser den noget andet , og firefox noget helt andet , men det er nok kodningen
Avatar billede a55830 Praktikant
08. november 2008 - 14:13 #30
Jeg takker mange gange for hjælpen det har hjulpet mig utroligt meget
Avatar billede w13 Novice
08. november 2008 - 14:15 #31
Når du bruger UTF-8 skal du huske både at sætte det i et meta-tag i <head>-sektionen:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Og så skal du også sætte det som sidens encoding. Dette gøres forskellige steder afhængigt af editor. F.eks. kan du styre det i Notesblok i "Gem Som"-vinduet.

Til sidst skal din database også sættes til at opbevare data som UTF-8 / Unicode for at det virker.

Og mange tak for points! :)
Avatar billede a55830 Praktikant
08. november 2008 - 14:33 #32
det var så lidt , jeg fik jo noget for dem , men prøv lige at kikke på www.blueeye.dk/ddha
klik på undervisning og der efter tilbud

den rykker fra side til side
Avatar billede w13 Novice
08. november 2008 - 14:37 #33
Det ser ud til, at et eller andet centreres, men jeg har svært ved at se hvad i dine koder. Bl.a. fordi du har flere gange doctypes, html-, head- og body-tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/menu.css">
       
        <script type="text/javascript" src="js/menu.js"></script>

</head>

<body>
<table align="center" width="100%" border="0" cellspacing="5" cellpadding="5" class="noline">
    <tr height="16">
        <td class="noline" colspan="3" width="100%" bgcolor="#777777">Hvilken undervisning tilbyder vi : </td>
    </tr>
    <tr>
        <td class="noline" width="20">&nbsp;</td>
        <td class="noline" align="left">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       
        <link type="text/css" rel="stylesheet" href="css/menu.css">
       
        <script type="text/javascript" src="js/menu.js"></script>
       
    </head>
    <body>
       
        <div id="container">
Avatar billede a55830 Praktikant
08. november 2008 - 15:20 #34
det virker det var mig der havde lavet en fejl
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester