kostenloser Webspace werbefrei: lima-city


mouseover bild und text

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    bilo

    bilo hat kostenlosen Webspace.

    Hi ich brauche Hilfe.

    Ich mache zur Zeit eine Homepage für unsere Schule Projekt "Print IT.
    Auf einer Seite habe ich ein Bild reingetan. Ein Schrank mit Artikeln, wo man dann mit der Mouse rübergeht und es erscheint ein Bild von der Artikel, um sie besser zu betrachten. Aber ich wollt nun so machen, dass es jedes mal neben das Schrankbild auftaucht und darunter mit Text z.B. Produktbeschreibung oder Preise usw. Mein Code sieht bis jetzt so aus.

    <script language="javascript">
    <!--
    function Aktivieren()
    {
    	document.getElementById('links1').style.visibility = "visible";
    	document.getElementById('rechts1').style.visibility = "visible";
    	document.getElementById('links2').style.visibility = "visible";
    	document.getElementById('rechts2').style.visibility = "visible";
    	document.getElementById('links3').style.visibility = "visible";
    	document.getElementById('rechts3').style.visibility = "visible";
    }
    
    function Deaktivieren()
    {
    	document.getElementById('links1').style.visibility = "hidden";
    	document.getElementById('rechts1').style.visibility = "hidden";
    	document.getElementById('links2').style.visibility = "hidden";
    	document.getElementById('rechts2').style.visibility = "hidden";
    	document.getElementById('links3').style.visibility = "hidden";
    	document.getElementById('rechts3').style.visibility = "hidden";
    }
    //-->
    </script>

    <img src="img/schrank.jpg" width="350" height="600" usemap="#schrank" alt="Schrank"/>

    <img src="img/links222.JPG" width="250" height="250" id="links1" style="visibility:hidden;position:absolute;left:100px;right:100px;top:100px;">

    <map name="schrank">
    <area id="" shape="circle" OnMouseOver="Aktivieren();" OnMouseOut="Deaktivieren();" coords="80,130,80" href="a" accesskey="e">
    <area id="" shape="circle" coords="412,302,50" nohref accesskey="e">
    <area id="" shape="circle" coords="70,160,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,150,30" nohref accesskey="e">
    <area id="" shape="circle" coords="64,270,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,270,30" nohref accesskey="e">
    <area id="" shape="circle" coords="64,355,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,355,30" nohref accesskey="e">
    </map>


    Ich möchte nicht mit position:Absolute arbeiten das ist bissel doof, da es manchmal Probleme mit Auflösung gibt. Wie kann ich das anders machen?

    fullcode:
    <body bgcolor="teal" background="">
    <div id="main">
    <center>
    <H2>Produkte von Print IT</H2>
    <hr></hr>
    </center>
    <script language="javascript">
    <!--
    function Aktivieren()
    {
    	document.getElementById('links1').style.visibility = "visible";
    	document.getElementById('rechts1').style.visibility = "visible";
    	document.getElementById('links2').style.visibility = "visible";
    	document.getElementById('rechts2').style.visibility = "visible";
    	document.getElementById('links3').style.visibility = "visible";
    	document.getElementById('rechts3').style.visibility = "visible";
    }
    
    function Deaktivieren()
    {
    	document.getElementById('links1').style.visibility = "hidden";
    	document.getElementById('rechts1').style.visibility = "hidden";
    	document.getElementById('links2').style.visibility = "hidden";
    	document.getElementById('rechts2').style.visibility = "hidden";
    	document.getElementById('links3').style.visibility = "hidden";
    	document.getElementById('rechts3').style.visibility = "hidden";
    }
    //-->
    </script>
    <table width="700" border="2" align="center">
    <tr>
    <td align="center" width="1%" valign="top">
    <p style="color:orange;font-size:20px;">Zur Zeit führen wir folgende Produkte.<br> Um Informationen zu jeweiligen Produkten zu erhalten klicken Sie auf die Artikeln im Schrank.</p>
    </td>
    </tr>
    <tr>
    <td align="center" valign="top">
    <img src="img/schrank.jpg" width="350" height="600" usemap="#schrank" alt="Schrank"/>
    <div>
    <img src="img/links222.JPG" width="250" height="250" id="links1" style="visibility:hidden;position:absolute;left:100px;right:100px;top:100px;">
    <map name="schrank">
    <area id="" shape="circle" OnMouseOver="Aktivieren();" OnMouseOut="Deaktivieren();" coords="80,130,80" href="a" accesskey="e">
    <area id="" shape="circle" coords="412,302,50" nohref accesskey="e">
    <area id="" shape="circle" coords="70,160,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,150,30" nohref accesskey="e">
    <area id="" shape="circle" coords="64,270,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,270,30" nohref accesskey="e">
    <area id="" shape="circle" coords="64,355,30" nohref accesskey="e">
    <area id="" shape="circle" coords="220,355,30" nohref accesskey="e">
    </map>
    </div>
    	</td>
    	</tr>
    </table>
    </div>
    <body>


    Ach hab gleich hochgeladen. Hier link: http://web1.bravo939.server4you.de/schule/wp/homepage/artikeln.html

    Beitrag zuletzt geändert: 25.4.2009 13:09:15 von bilo
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. es geht doch schon beim ersten Produkt!

    nur die links zum bild geht nicht bringt mir nur ne leere box.:biggrin:
  4. Kann bestätigen, dass die Angabe Richtig is ^^ (die von psd) ;)
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!