✔ Eine Frage zu JS

C

caramba12321

blödefragensteller
Guten Tag Community,

normal bin ich ein begeisterter PHP programmierer und habe mit JS nichts am Hut.
Ich habe aber nun eine Frage.
Ich möchte auf meiner Homepage ein Bild klein einblenden und es soll an einer anderen Stelle, wenn man mit der Maus über das Bild fährt ( also im OVER status ), in orginial Größe angezeigt werden.
Frage:
Welche Funktionen brauche ich hierzu und wie fängt man an so etwas zu realisieren?
Mit der Syntax habe ich kein problem, die lässt sich gut ableiten.
Wäre für Hilfe dankbar,

Liebe Grüsse
Caramba
 
Das Einfachste wäre, du änderst schlicht das src-Attribut.

Dazu bindest du erstmal als Dummy bspw. ein transparentes Gif ein...und änderst dann dessen Quelle:
Code: 
<img onmouseover="document.grossbild.src='grosses.jpg';">
<img name="grossbild" src="transparentes.gif">
 
also ich meinte das eher so, das ich das kleine bild in einem DIV einbette und wenn der Status dann OVER ( MOUSE) wird dann soll in einem anderen DIV das originiale Bild angezeigt werden.
 
Hier ein kleines Beispiel zum Grafiktausch:

PHP: 
<script type="text/javascript">
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
image3 = new Image();
image3.src = "pic03.jpg";

// swapImage
function swapImage(grafikname,grafiktausch)
{
document.images[grafikname].src=grafiktausch;
}
</script>
HTML: 
<div id="imageBox"><!-- zeigt die grossen Bilder an -->
   <img src="pic00.jpg" alt="" name="start">
</div>

<ul>
    <li><a href="#" onmouseover="swapImage('start','pic01.jpg')" onmouseout="swapImage('start','pic00.jpg')"><img src="pic01_th.jpg" alt="load pic01"></a></li>
    <li><a href="#" onmouseover="swapImage('start','pic02.jpg')" onmouseout="swapImage('start','pic00.jpg')"><img src="pic02_th.jpg" alt="load pic02"></a></li>
    <li><a href="#" onmouseover="swapImage('start','pic03.jpg')" onmouseout="swapImage('start','pic00.jpg')"><img src="pic03_th.jpg" alt="load pic03"></a></li>
<ul>
 
So also ich habe das jetzt mal angewand und leider funktioniert es nicht hier einmal der code, vielleicht weiss ja jemand weiter:

index.php durch das switch script wird dann sie seite musik.php geladen
HTML: 
<?php

ob_start();

?>
<html>
<head>
    <title>-=Willkommen auf der Homepage von Eiko's Gitarrenstudio=-</title>
    <link rel="stylesheet" type="text/css" href="./content/inc/style/style.inc.css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
        // Image-Preloader
        image1 = new Image();
        image1.src = "./content/sites/musik/1.jpg";
        image2 = new Image();
        image2.src = "./content/sites/musik/2.jpg";
        image3 = new Image();
        image3.src = "./content/sites/musik/3.jpg";
        image4 = new Image();
        image4.src = "./content/sites/musik/4.jpg";
        image5 = new Image();
        image5.src = "./content/sites/musik/5.jpg";
        
        
        // swapImage
        function swapImage(grafikname,grafiktausch)
        {
        document.images[grafikname].src=grafiktausch;
        }
    </script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table align="center" width="760" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="11">
            <img src="Bilder/index_01.gif" width="760" height="29" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/index_02.gif" width="39" height="84" alt=""></td>
        <td colspan="4">
            <img src="Bilder/Header.gif" width="251" height="58" alt=""></td>
        <td colspan="6" rowspan="2">
            <img src="Bilder/index_04.gif" width="470" height="84" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_05.gif" width="251" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="Bilder/index_06.gif" width="760" height="144" alt=""></td>
    </tr>
    <tr>
        <!-- Navi !-->
        <?php
            //Navi-load
            include('./content/inc/navi/navi.inc.php');
        ?>
        <!-- Ende Navi !-->
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/index_15.gif" width="191" height="30" alt=""></td>
        <td colspan="8" rowspan="2" valign="top" background="Bilder/content.gif">
            <table class="table_content">
                <tr>
                    <td>
                        <!-- Content !-->
                        <?php
                        //Content-load
                        include('./content/inc/content/contentload.inc.php');
                        ?>
                        <!-- Ende Content !-->
                    </td>
                </tr>
            </table>        
        </td>
    </tr>
    <tr>
        <td colspan="3" background="Bilder/content_01.gif" width="191" height="218">
            <div id="imageBox"><!-- zeigt die grossen Bilder an -->
               <img src="Bilder/content_01.gif" alt="" name="start">
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="Bilder/index_18.gif" width="760" height="64" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/spacer.gif" width="39" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="47" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="105" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="17" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="82" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="37" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="78" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="88" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="89" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="96" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="82" height="1" alt=""></td>
    </tr>
</table>
</body>
</html>
<?php

ob_end_flush();

?>

musik.php
HTML: 
<div style="width: 558px; height: 238px; overflow : auto; align="center">    
    <h2 style="text-decoration:underline;" align="center">Discografie</h1>
    <table>
        <tr>
            <td><a href="#" onmouseover="swapImage('start','/content/sites/musik/2.jpg')" onmouseout="swapImage('start','Bilder/content_01.gif')"><img src="./content/sites/musik/2.jpg" width="50px" height="50px"/></a></td>
            <td valign="center">Mayer's Big Band (1988)</td>
        </tr>
        <tr>
            <td><a href="#" onmouseover="swapImage('start','/content/sites/musik/4.jpg')" onmouseout="swapImage('start','Bilder/content_01.gif')"><img src="./content/sites/musik/4.jpg" width="50px" height="50px"/></a></td>
            <td valign="center">Mayer's Big Band - Live (1991)</td>
        </tr>
        <tr>
            <td><a href="#" onmouseover="swapImage('start','/content/sites/musik/5.jpg')" onmouseout="swapImage('start','Bilder/content_01.gif')"><img src="./content/sites/musik/5.jpg" width="50px" height="50px"/></a></td>
            <td valign="center">THW - Die Zebras kommen (1993)</td>
        </tr>
        <tr>
            <td><a href="#" onmouseover="swapImage('start','/content/sites/musik/1.jpg')" onmouseout="swapImage('start','Bilder/content_01.gif')"><img src="./content/sites/musik/1.jpg" width="50px" height="50px"/></a></td>
            <td valign="center">Hokuspokus - Die Kinder Kunterbunt (1996)</td>
        </tr>
        <tr>
            <td><a href="#" onmouseover="swapImage('start','/content/sites/musik/3.jpg')" onmouseout="swapImage('start','Bilder/content_01.gif')"><img src="./content/sites/musik/3.jpg" width="50px" height="50px"/></a></td>
            <td valign="center">Mayer's Big Band - '99 (1999)</td>
        </tr>        
    </table>        
        <br/>
        plus unzähliger Demo-CD’s
        <br/><br/>
        Demnächst gib's hier auch was für die Ohren!
</div>
 
Vermutlich liegt's an dem fehlenden Punkt in der Grafikreferenz, weshalb der Grafiktausch nicht funktioniert:

Code: 
onmouseover="swapImage('start','./content/sites/musik/2.jpg')

Die Angaben / Werte in den HTML-Attributen width,height werden ohne Einheit, wie z.B. px, notiert.

In der folgenden Zeile fehlt am Ende des style-Attributs das abschliessende Anführungszeichen:

Code: 
<div style="width: 558px; height: 238px; overflow: auto;" align="center">
Konsequentes CSS wäre dann:

Code: 
<div style="width: 558px; height: 238px; overflow: auto; text-align: center;">
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück