Avatar billede krk Nybegynder
23. februar 2005 - 16:53 Der er 7 kommentarer og
1 løsning

skift billede ved mouseover

Hej
Jeg vil gerne have at når man køre musen over et tekst-link så bliver der vist et billede et andet sted på siden. Men når musen så glider videre til det næste link skal et nyt billed blive vist på den samme plads som det første billede.
(se eksemplet : http://kryt.dk/kasser/webdesign.htm - kør musen over de små billeder)

Det jeg gerne vil have gjort anderledes denne gang er at nu skal det ikke være et billede som musen køre over , men et tekst-link.

Jeg sender den kode med som jeg brugte i eksemplet - måske kan det hjælpe.

I <head>: <script type="text/javascript">
var activeImg;
function swapImages(ID) {
      elm = document.getElementById(ID).style
      if (activeImg) {activeImg.display="none";}
      elm.display = (elm.display == "block") ? "none" : "block";
      activeImg = elm;
}
function initImg() {
      activeImg = document.getElementById("pic1").style;
      activeImg.display = "block";
}
window.onload=initImg;
</script>

I <body>: <td width="182" height="119" valign="top" background="images/grafiskdesign.gif"><img id="pic1" src="images/quick_mellem.jpg" style="display:block">
                  <img id="pic2" src="images/rose_mellem.jpg" style="display:none">
                  <img id="pic3" src="images/flere_roser.jpg" style="display:none">
                </td>
                <td width="185" height="119" valign="top" background="images/kontaktside.jpg">
                  <table width="185" height="119" border="0" cellpadding="0" cellspacing="0">
                    <tr valign="top">
                      <td height="17" colspan="4"><img src="images/space_holder.gif" width="1" height="1"></td>
                    </tr>
                    <tr>
                      <td width="46" height="24" valign="bottom"><a href="http://www.kryt.dk/green1/bg.htm" target="_blank"><img src="images/quick_lille.jpg" alt="Quick Reng&oslash;ring" width="35" height="24" border="0" onmouseover="swapImages('pic1')" onmouseout="swapImages('pic1')"></a></td>
                      <td width="46" valign="bottom"><a href="#" onClick="window.open('rose.htm ', 'rose', 'width=326,height=480,top=100,left=225,status=0,toolbar=0,menubar=0,location=0,resizable=0,scrollbars=0,titlebar=1');" ><img src="images/rose_lille.jpg" alt="Rose" width="35" height="24" border="0" onmouseover="swapImages('pic2')" onmouseout="swapImages('pic2')"></a></td>

                      <td width="46" valign="bottom"><a href="#" onClick="window.open('rose_flere.htm ', 'flere', 'width=580,height=387,top=100,left=225,status=0,toolbar=0,menubar=0,location=0,resizable=0,scrollbars=0,titlebar=1');" >
                        <img src="images/flere_roser_lille.jpg" alt="Roser" width="35" height="24" border="0" onmouseover="swapImages('pic3')" onmouseout="swapImages('pic3')"></td>
                      <td width="45" valign="bottom">&nbsp;</td>
                    </tr>
                    <tr valign="top">
                      <td height="78" colspan="4">&nbsp;</td>
                    </tr>
                  </table></td>

Håber der er nogen der kan hjælpe :-)
Avatar billede roenving Novice
23. februar 2005 - 17:11 #1
F.eks.

<td width="46" height="24" valign="bottom"><a href="http://www.kryt.dk/green1/bg.htm" target="_blank" onmouseover="swapImages('pic1')" onmouseout="swapImages('pic1')">Den tekst, du vil vise</a></td>
Avatar billede krk Nybegynder
24. februar 2005 - 13:10 #2
Ja, selvfølgelig, nogen gange skulle jeg måske tænke spørgsmålet igennem inden jeg stiller det her på eksperten ;-)
Mange tak for hjælpen.

Det virker i et html dokument, men jeg har lavet mit site i php og der har jeg nogle problemer. så jeg tror lige jeg opretter et nyt spørgsmål :-)
Avatar billede roenving Novice
24. februar 2005 - 13:18 #3
Udskriver du det med echo eller print ?-)

f.eks.

echo "<td width='46' height='24' valign='bottom'><a href='$row["Url"]' target='_blank' onmouseover=\"swapImages('$row["picId"]')" onmouseout=\"swapImages('$row["picId"]')\">Den tekst, du vil vise</a></td>"
Avatar billede krk Nybegynder
24. februar 2005 - 13:24 #4
Med print.
<?php
print"

<table width='408' border='0' cellspacing='0' cellpadding='0' class='main'>
  <tr>
    <td width='120'>
        <a href='http://www.quick-rengoering.dk' target='_blank'>Quick Reng&oslash;ring</a><br>
          <a href='http://www.cyberfrivillig.dk' target='_blank'>Cyberfrivillig</a><br>
        Add-On-Ax<br>
        <a href='http://www.kryt.dk/blueline' target='_blank'>Blueline</a><br>
        <a href='http://www.kryt.dk/MoccAroma/default.html' target='_blank'>MoccAroma</a><br>
        <a href='http://www.kryt.dk/kasser' target='_blank'>Kasser</a></p>
       
        <p><strong>Grafik design</strong><br>
        <a href='images/blomster.htm' target='_blank'>Blomster</a><br>
          <a href='http://www.kryt.dk/1d' target='_blank'>1.klasse</a><br>
          <a href='http://kryt.dk/gade/' target='_blank'>P.O. Gade</a></p>
   
          <p><strong>Flash<br></strong>
          <a href='http://www.kryt.dk/green1/bg.htm' target='_blank' onmouseover='swapImages('pic2')' onmouseout='swapImages('pic2')'>Kryt</a>
        <a href='http://www.kryt.dk/nextinnovation/landskab/landskab.html' target='_blank' onmouseover='swapImages('pic3')' onmouseout='swapImages('pic3')'>NextInnovation</a>&nbsp;
          <p>
    </td>
    <td valign='top'>
        <img id='pic1' src='images/axapta.jpg' style='display:block'>
        <img id='pic2' src='images/webdesign.jpg' style='display:none'>
        <img id='pic3' src='images/profil.jpg' style='display:none' alt='MoccAroma'>
    </td>
  </tr>
</table>";
?>
Avatar billede roenving Novice
24. februar 2005 - 13:27 #5
<a href='http://www.kryt.dk/green1/bg.htm' target='_blank' onmouseover=\"swapImages('pic2')\" onmouseout=\"swapImages('pic2')\">Kryt</a>
        <a href='http://www.kryt.dk/nextinnovation/landskab/landskab.html' target='_blank' onmouseover=\"swapImages('pic3')\" onmouseout=\"swapImages('pic3')\">NextInnovation</a>&nbsp;
Avatar billede krk Nybegynder
24. februar 2005 - 13:34 #6
tak, det virker perfekt.
Men hvorfor virker det??
Hvorfor skal det være " ?  findes der en logisk forklaring
Avatar billede roenving Novice
24. februar 2005 - 14:33 #7
Ja, javascript har to forskellige streng-delimiters, ' og "", og en streng, som er startet af den ene delimiter kan kun sluttes med den selv, så indeni er det frit at bruge den anden, mens den samme jo vil afslutte tekst-strengen, så der kommer et illegalt udtryk ud af det ...

-- i php kan man jo nogenlunde det samme, bortset fra den funktionalitet, som handler om direkte indskrivning af variabel-navne, når man bruger ""er !-)

F.eks.

echo 'En tekst, ' . $variabel . ', noget mere tekst';

er det samme som:

echo "En tekst, $variabel, noget mere tekst";

-- det kan man jo ikke i javascript, da der ikke er nogen obligatorisk variabel-markering, som php har med $-tegnet !o]

-- velbekomme '-)
Avatar billede roenving Novice
25. februar 2005 - 12:30 #8
-- og tak for point ;~}
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