mouseover bild und text

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

13:06, 25.4.2009

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

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

psd hat kostenlosen Webspace.

7:19, 29.4.2009
es geht doch schon beim ersten Produkt!

nur die links zum bild geht nicht bringt mir nur ne leere box.
limabone

limabone hat kostenlosen Webspace.

7:36, 29.4.2009
Kann bestätigen, dass die Angabe Richtig is ^^ (die von psd) ;)
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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city