Avatar billede vifa Novice
21. januar 2009 - 21:35 Der er 26 kommentarer og
1 løsning

Mouse on over funktion med billeder

Hej

Jeg har to steder på min side hvor jeg har en mouseonover funktion, hvortil et billede bliver vist alt afhængig af hvilket link man holder musen over.

Mit problem er så, at i Firefox virker funktionen kun det ene sted, mens det i IE og Chrome kun virker det andet sted.


Her er mit Java script:

----------------------------------------------------
<script language="javascript" type="text/javascript">

function show(id,tf)
{
    if (tf == true)
    {
        default1.style.display = "none";
        id.style.display = "block";
    }
    if (tf == false)
    {
        default1.style.display = "block";
        id.style.display = "none";
    }
}
----------------------------------------------------

På begge sider anvender jeg en while til at hente alle data ud af min database og liste disse i en tabel. Meningen er så, at når man holder musen over en tabelrække skjuler den et standard billede og viser istedet et billede afhængig af hvad du holder musen over.

I min while har jeg følgende kode:
----------------------------------------------------
$katbilleder[$row['id']]=$row['billede'];
----------------------------------------------------             
Der hvor jeg så skal have vist mit billede bruger jeg følgende kode:

----------------------------------------------------
<?php
    foreach($katbilleder as $k => $v)
    {
    echo '<img width="400" src="'.$v.'" alt="'.$v.'" style="display: none;" id="kat'.$k.'" />';
    }
?>
----------------------------------------------------

Jeg har brugt nøjagtig samme kode på begge sider, men det undre mig hvorfor det kun virker på en af siderne.


Kan nogen hjælpe?
Avatar billede jokkejensen Novice
21. januar 2009 - 22:44 #1
Hvor er linket ? "mouseonover" er ikke en gyldig attribut hvis du også har kaldt den det på linket.

Hvordan kalder du show ?

Og hvad er default1 ?

Måske et link ville sige lidt mere, eller bare et dumb af al koden.

/J
Avatar billede vifa Novice
21. januar 2009 - 23:17 #2
Prøver lige at smide al den kode som jeg bruger.

Mit script som ligger i min index.php fil:

--------------------------------------------------------------
function show(id,tf)
{
    if (tf == true)
    {
        default1.style.display = "none";
        id.style.display = "block";
    }
    if (tf == false)
    {
        default1.style.display = "block";
        id.style.display = "none";
    }
}
--------------------------------------------------------------

Jeg har så en 'personale side' hvor jeg skal have et billede vist når musen holdes over en navn - koden dertil ser således ud:

--------------------------------------------------------------
$hentliste = "SELECT * FROM personale ORDER BY id ASC";

$udforhentliste = mysql_query($hentliste) or die (mysql_error());



    while ($row = mysql_fetch_assoc($udforhentliste))
    {
   
   
        $profilbilleder[$row['noegle']]=$row['profilbillede'];
       
       
        echo '
       
       
        <table class=personale  onmouseover="profil(profil' . $row['noegle'] . ', true);" onmouseout="profil(profil' . $row['noegle'] . ', false);">
   
        <tr>
            <td class=personaleliste>
               
                <div class=personale>
                    <b>
                   
                    '
                    . $row['stilling'] .
                    '
                   
                    </b>
                </div>
                           
            </td>
           
           
            <td class=personaleliste>
           
                <div class=personale>
                   
                    '
                    . $row['navn'] .
                    '
                   
                </div>
           
            </td>
           
           
            <td class=personaleliste>
               
                <div class=personale>
                   
                    '
                    . $lang['personale'] . ' ' . $row['tlf'] .
                    '
                   
                </div>
       
            </td>
           
           
            <td class=personaleliste>
           
                <div class=personale>
                    <a href="mailto:
                       
                        '
                        . $row['email'] .
                        '
                    ">
       
                        '
                        . $row['email'] .
                        '
                       
                    </a>
                </div>           
           
            </td>
        </tr>
       
        </table>       
           
        <hr>
       
    ';
   
   
       
    }
    ?>




<table>
<tr>
            <td>
           
            <?php
           
           
           
           
            foreach($profilbilleder as $n => $p)
            {
           
                echo '<img src="profilbilleder/'.$p.'" alt="'.$p.'" style="display: none;" id="profil'.$n.'"/>';
           
            }   
           
       
           
            ?>   
               
                       
            </td>
        </tr>
</table>
--------------------------------------------------------------

Det virker fint på min personale side, men jeg har også et katalog, hvor jeg anvender nøjagtig samme stykke kode hvor det så ikke virker.

Til at udføre den samme funktion i mit katalog har jeg dertil et nyt script næsten nøjagtig magen til det andet, som også ligger i min index.php:
--------------------------------------------------------------

function profil(id,tf)
{
    if (tf == true)
    {
        id.style.display = "block";
    }
    if (tf == false)
    {
        id.style.display = "none";
    }
}

--------------------------------------------------------------

På selve min katalog side har jeg følgende kode:
--------------------------------------------------------------
<table width="100%">

<tr>
    <td valign="top">
   
        <b>Vælg en kategori:</b>
   
        <br>
   
            <table cellspacing="0" cellpadding="5">
                <?php
               
                $hentekategori         = "SELECT * FROM kategori ORDER BY ID ASC";
               
                $udforhentekategori = mysql_query($hentekategori) or die(mysql_error());
               
               
                while($row = mysql_fetch_assoc($udforhentekategori))
                {
               
                    $katbilleder[$row['id']]=$row['billede'];
                   
                   
                   
                    echo '
                    <tr>
                        <td onmouseover="show(kat' . $row['id'] . ', true);" onmouseout="show(kat' . $row['id'] . ', false);">';
                    ?>
                    <a class=two href="index.php?side=katalog&amp;kategori=<?php echo $row['id']; ?>">
                    <?php
                    echo $row['kategori'];
                    ?>
                    </a>
                        </td>
                    </tr>
                    <?php
                }
                ?>
            </table>
           
    </td>
   
    <td valign="top">
   
        <img width="400" src="billede/1996_1.jpg" alt="1996_1.jpg" style="display: block;" id="default1" />
           
            <?php
                foreach($katbilleder as $k => $v)
                {
                    echo '<img width="400" src="'.$v.'" alt="'.$v.'" style="display: none;" id="kat'.$k.'" />';
                }
            ?>
           
    </td>

</tr>



</table>
--------------------------------------------------------------
Avatar billede majbom Novice
24. januar 2009 - 09:05 #3
som du har pastet koden hér har du byttet rundt på scriptene; i det øverste har du en js-funktion der hedder "show", men du kalder en js-funktion der hedder "profil" ved mousover og omvendt i det nederste. sådan ser det ikke ud på din side vel?

prøv at ret:

default1.style

til:

document.getElementById('default1').style
Avatar billede vifa Novice
24. januar 2009 - 16:21 #4
Hov ja, jeg har vist lige byttet rundt på scriptene...det er selvfølige ikke sådan det står i selve koden; eller det vil sige, at begge scriptene står i starten af index.php, mens på katalog siden og

Jeg har lige prøvet at skrive følgende istedet:

-----------------------------------------------------

function show(id,tf)
{
    if (tf == true)
    {
       
        document.getElementById('default1').style = "none";
        id.style.display = "block";
    }
    if (tf == false)
    {
       
        document.getElementById('default1').style = "block";
        id.style.display = "none";
    }
}

-----------------------------------------------------

Det virker stadig ikke (Firefox)...Før virkede det i IE, men nu virker det heller ikke her...Jeg retter det tilbage igen så.

Jeg undre mig bare over at koden virker på min personale side, mens den ikke gør det på min katalog side... :S
Avatar billede majbom Novice
24. januar 2009 - 16:41 #5
du får ikke en javascript-fejl nede i statuslinjen?
Avatar billede vifa Novice
24. januar 2009 - 17:00 #6
Hm. tjo. Jeg har lige testet det i henholdsvis Firefox og IE:

IE:
  Katalog siden:  Virker fint
  Personale siden: "Der opstod en fejl på siden" står der i statuslinjen når jeg holder musen over et af de 'link' der skulle vise et billede


Firefox:
  Katalog siden: Virker ikke
  Personale siden: Virker fint

I firefox har jeg installeret en HTML validator, den giver mig følgende advarsel:

"<img> Anchor 'profil1' already defined", jeg ved ikke om det har noget at sige, jeg får samme advarsel på både personale siden og katalog siden, men ikke destro mindre virker koden dog fint nok på personale siden
Avatar billede majbom Novice
24. januar 2009 - 17:11 #7
i ie kan du dobbeltklikke på fejl i statuslinjen og se det detaljer...
Avatar billede vifa Novice
24. januar 2009 - 17:25 #8
Den skriver følgende: "'style' er null eller ikke et objekt"
Avatar billede majbom Novice
24. januar 2009 - 17:41 #9
prøv lige at brug document.getElementById på din

id.style...
Avatar billede vifa Novice
24. januar 2009 - 18:01 #10
Hm...ja, nu nærmer vi os da vist noget. Firefox reagere i hvertfald på det nu. Mit script gør jo, at et standard billede gerne skulle skjules mens et andet billede - anhængig af hvad man holder musen over - bliver vist. Lige nu bliver mit standard billede skjult når jeg holder musen over et af 'linkene', men den viser ikke det billede den så gerne skulle gøre istedet for. Den viser ingenting.


Mit script ser nu således ud:

------------------------------------------------
function show(id,tf)
{
    if (tf == true)
    {
        document.getElementById('default1').style.display = "none";
        document.getElementById('id').style.display = "block";
    }
    if (tf == false)
    {
        document.getElementById('default1').style.display = "block";
        document.getElementById('id').style.display = "none";
    }
}

------------------------------------------------
Avatar billede majbom Novice
24. januar 2009 - 18:06 #11
document.getElementById('id').style.display = "block";

skal være:

document.getElementById(id).style.display = "block";

der skal ikke ' rundt om id, da den så vil lede efter et element der hedder id og ikke et der hedder indholdet af variablen id :)
Avatar billede vifa Novice
24. januar 2009 - 18:10 #12
det ændre ikke noget... :S

Men hvis der ikke skal ' rundt om id, så skal der vel heller ikke rundt om default1?
Avatar billede majbom Novice
24. januar 2009 - 18:34 #13
jo, for default er en streng, id er en variabel...

du fjernede ' både i if(true) og if(false)?
Avatar billede vifa Novice
24. januar 2009 - 18:54 #14
Nå ja, selvfølig, du har ret: default1 er en streng og id er en variabel...jeg tænkte mig ik lige om :)

Jo, jeg har fjernede ' både i if(true) og if(false), scriptet ser nu sådan her ud:

------------------------------------------
function show(id,tf)
{
    if (tf == true)
    {
        document.getElementById('default1').style.display = "none";
        document.getElementById(id).style.display = "block";
    }
    if (tf == false)
    {
        document.getElementById('default1').style.display = "block";
        document.getElementById(id).style.display = "none";
    }
}
------------------------------------------

I IE skriver den følgende fejl hvis jeg klikker på statuslinjen: "Et objekt er obligatorisk".
Avatar billede majbom Novice
24. januar 2009 - 20:01 #15
en skriver et linjenummer i fejlen, kan du ikke kige i kilden og se hvor det er?
Avatar billede vifa Novice
24. januar 2009 - 21:19 #16
Den brokker sig over linje 24 og linje 29 i min kode:
Begge linjer har noget med det pågældende script at gøre.


Linje 24: document.getElementById(id).style.display = "block";

Linje 29: document.getElementById(id).style.display = "none";
Avatar billede majbom Novice
25. januar 2009 - 12:46 #17
jeg tror ikke at den sender det rigtige id med til funktionen

kan du ikke se i kilden om id'er på td'erne stemmer med dem på img'erne
Avatar billede vifa Novice
25. januar 2009 - 13:48 #18
Det kan den næsten ikke andet gøre.


-------------------------------------------------------
while($row = mysql_fetch_assoc($udforhentekategori))
                {
               
                    $katbilleder[$row['id']]=$row['billede'];
                   
                   
                   
                    echo '
                    <tr>
                        <td onmouseover="show(kat' . $row['id'] . ', true);" onmouseout="show(kat' . $row['id'] . ', false);">';
                    ?>
                    <a class=two href="index.php?side=katalog&amp;kategori=<?php echo $row['id']; ?>">
                    <?php
                    echo $row['kategori'];
                    ?>
                    </a>
                        </td>
                    </tr>
                    <?php
                }
-------------------------------------------------------

Jeg laver jo en while hvor jeg så henter alle mine 'links' ud fra databasen. Det aller første jeg gør i min while er at lave et array hvor hvert billede der er knyttet til det pågældende link blier associeret med en nøgle.

Efter min while, der hvor jeg skal have vist billederne deler jeg så mit array op med en foreach:

-------------------------------------------------------
<img width="400" src="billede/1996_1.jpg" alt="1996_1.jpg" style="display: block;" id="default1" />
           
            <?php
                foreach($katbilleder as $k => $v)
                {
                    echo '<img width="400" src="'.$v.'" alt="'.$v.'" style="display: none;" id="kat'.$k.'" />';
                }
            ?>
-------------------------------------------------------
Avatar billede majbom Novice
25. januar 2009 - 16:24 #19
det er jeg klar over, men prøv at tjek kilden, når du viser siden i din browser og se om den skriver de rigtige id'er begge steder...
Avatar billede vifa Novice
25. januar 2009 - 17:16 #20
Ja. Det stemmer overens.
Avatar billede majbom Novice
25. januar 2009 - 19:22 #21
prøv lige at ret:

<td onmouseover="show(kat' . $row['id'] . ', true);" onmouseout="show(kat' . $row['id'] . ', false);">';

til:

<td onmouseover="show(\'kat' . $row['id'] . '\', true);" onmouseout="show(\'kat' . $row['id'] . '\', false);">';
Avatar billede vifa Novice
25. januar 2009 - 21:25 #22
DET VIRKER!!! Det virker både i IE, Firefox og Chrome!

Men hvorfor? - hvad er forskellen?
Avatar billede vifa Novice
25. januar 2009 - 23:15 #23
Og forresten, hvordan giver jeg point? - det har jeg nemlig ikke fundet ud af endnu ... :S
Avatar billede majbom Novice
26. januar 2009 - 09:03 #24
grunden til at det ikke virkede før var faktisk det samme som i dine funktion; du skal have ' rundt om en streng, ellers tror den at det er en variabel.
så når du skriver show(kat'.$['id'], true); vil den "lede efter" en variabel der hedder kat1 f.eks. men det skal den ikke, den skal bruge strengen kat1, så derfor skal den ind i '

mht point, så skal du bare acceptere dette svar som jeg har lagt hér, ude til venstre
Avatar billede majbom Novice
26. januar 2009 - 10:28 #25
tak for point :)
Avatar billede vifa Novice
26. januar 2009 - 12:41 #26
Tak for hjælpen!...
Avatar billede majbom Novice
26. januar 2009 - 12:54 #27
selv tak
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