Supportnet / Forum / Webseiten/HTML
Knifflige Aufgabe mit hover:link und Bildern
Frage
Hallo Leute,
ich habe in meiner website verschiedene Begriffe stehen, hinter denen bei Überschreiten mit der Maus ein Bild in einem Fenster angezeigt werden soll...
Und dabei sollte bei jedem Begriff das jeweils unterschiedliche Bild an ein und derselben Stelle im Dokument erscheinen...
Kann mir einer sagen, wie ich das mache?
MfG
Antwort 1 von derpfleger
Antwort 2 von Knogger
Hey...ja so in etwa...
Diese "Box" sollte dabei aber irgendwo im Dokument platziert werden können und der Link dazu liegt in der Aufzählung von Begriffen, dabei sollte in der Box zu jedem Begriff ein entsprechend eigenes Bild angezigt werden, wenn ich mit der Maus drübergehe...
Mfg
Diese "Box" sollte dabei aber irgendwo im Dokument platziert werden können und der Link dazu liegt in der Aufzählung von Begriffen, dabei sollte in der Box zu jedem Begriff ein entsprechend eigenes Bild angezigt werden, wenn ich mit der Maus drübergehe...
Mfg
Antwort 3 von Knogger
Hallo!
Habe das soweit hinbekommen, wie unter dem o.a. Link, doch ein Problem bleibt mir...
Habe das ganze in ein Frame programmiert und wenn ich mit der Mouse über den Text "hover" zeigt er mir auch die Bilder an, nur ich kann ja per Klick auch dem Link folgen und dann macht er aus dem Frame eine "Seite kann nicht gefunden werden"!
Dabei würde es reichen, wenn die Bilder nur beim Hovereffekt angezeigt würden!
Was kann ich da machen..!?!?
Danke
Habe das soweit hinbekommen, wie unter dem o.a. Link, doch ein Problem bleibt mir...
Habe das ganze in ein Frame programmiert und wenn ich mit der Mouse über den Text "hover" zeigt er mir auch die Bilder an, nur ich kann ja per Klick auch dem Link folgen und dann macht er aus dem Frame eine "Seite kann nicht gefunden werden"!
Dabei würde es reichen, wenn die Bilder nur beim Hovereffekt angezeigt würden!
Was kann ich da machen..!?!?
Danke
Antwort 4 von Knogger
Keiner ne Ahnung?
Antwort 5 von Solo
Hi, da müssten wir schon mal deinen Code einsehen können.
Antwort 6 von rfb
ersetze die a-tags durch <span> (auch im CSS!).
Antwort 7 von Knogger
<?
include "../../u_nav_tool.php3";
?>
<html>
<head>
<title>qm-system</title>
<link rel="stylesheet" href="../../css_style.css">
<style type="text/css">
<!--
.header { font-family: Tahoma, Verdana, Helvetica, Arial; font-size: 12pt; color: #6666CC; text-decoration: none}
.hg { background-attachment: fixed; background-color: #FFFFFF; background-image: url(../../bilder/hg_unternehmen.jpg); background-repeat: no-repeat; background-position: left bottom}
.Stil7 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.Stil9 {
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
-->
<!--
#box {
margin:auto;
}
#box a {
color:#000000;
background:#FFFFFF;
font:normal 10pt arial, helvetica;
text-decoration:none;
display:block;
width:600px;
padding:0px;
border:0px solid black;}
#box a:hover {
color:#0033FF;
background:white;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:160px;right:0px;z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 10pt arial, helvetica;
border:1px black;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="30" topmargin="20" marginwidth="0" marginheight="0" class="hg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header"><font face="Tahoma, Verdana, Helvetica, Arial" color="#6666CC">
<img src="../../bilder/ue_qm-system.gif" width="250" height="37"> </font></td>
</tr>
<tr bgcolor="#CCCCCC">
<td height="1"></td>
</tr>
</table><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="100%" height="278" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="46%"><br>
<br> <strong>Die Qualitätsprüfung erfolgt über:</strong> <br> <br>
<div id="box"><a href="#"> Verzahnungsprüfung mit CNC-Verzahnungsschleifmaschinen<span><img src="Internet01.JPG" width="492" height="378"></span></a><a href="#"> 3-D-Messmaschinen<span><img src="Internet02.JPG" width="492" height="378"></span></a></div>
<br>
<p></p>
Zerstörungsfreie Materialprüfungen erfolgen durch: <br>
Ultraschallprüfung (UT) <br>
Magnetpulverprüfung (MT)<br>
Eindringprüfung (PT) <br>
Sichtprüfung (VT)<br>
Chemische Analyse (SA)
<p></p>
</td>
</tr>
</table>
</body>
</html>
include "../../u_nav_tool.php3";
?>
<html>
<head>
<title>qm-system</title>
<link rel="stylesheet" href="../../css_style.css">
<style type="text/css">
<!--
.header { font-family: Tahoma, Verdana, Helvetica, Arial; font-size: 12pt; color: #6666CC; text-decoration: none}
.hg { background-attachment: fixed; background-color: #FFFFFF; background-image: url(../../bilder/hg_unternehmen.jpg); background-repeat: no-repeat; background-position: left bottom}
.Stil7 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.Stil9 {
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
-->
<!--
#box {
margin:auto;
}
#box a {
color:#000000;
background:#FFFFFF;
font:normal 10pt arial, helvetica;
text-decoration:none;
display:block;
width:600px;
padding:0px;
border:0px solid black;}
#box a:hover {
color:#0033FF;
background:white;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:160px;right:0px;z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 10pt arial, helvetica;
border:1px black;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="30" topmargin="20" marginwidth="0" marginheight="0" class="hg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header"><font face="Tahoma, Verdana, Helvetica, Arial" color="#6666CC">
<img src="../../bilder/ue_qm-system.gif" width="250" height="37"> </font></td>
</tr>
<tr bgcolor="#CCCCCC">
<td height="1"></td>
</tr>
</table><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="100%" height="278" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="46%"><br>
<br> <strong>Die Qualitätsprüfung erfolgt über:</strong> <br> <br>
<div id="box"><a href="#"> Verzahnungsprüfung mit CNC-Verzahnungsschleifmaschinen<span><img src="Internet01.JPG" width="492" height="378"></span></a><a href="#"> 3-D-Messmaschinen<span><img src="Internet02.JPG" width="492" height="378"></span></a></div>
<br>
<p></p>
Zerstörungsfreie Materialprüfungen erfolgen durch: <br>
Ultraschallprüfung (UT) <br>
Magnetpulverprüfung (MT)<br>
Eindringprüfung (PT) <br>
Sichtprüfung (VT)<br>
Chemische Analyse (SA)
<p></p>
</td>
</tr>
</table>
</body>
</html>
Antwort 8 von rfb
OK, der Tipp in A6 wäre gut, wenn der IE nicht so schrecklich veraltet wäre (Firefox und Opera machen das problemlos)
Nicht so elegant, aber effektiv ist dann:
also den Link nutzbar machen mit einem ziel auf der aktuellen Seite.
Nicht so elegant, aber effektiv ist dann:
<div id="box"><a name="bleibhier" href="#hier"> Verzahnungsprüfung mit CNC-Verzahnungsschleifmaschinen<span><img src="Internet01.JPG" width="492" height="378"></span></a><a href="#bleibhier"> 3-D-Messmaschinen<span><img src="Internet02.JPG" width="492" height="378"></span></a></div>also den Link nutzbar machen mit einem ziel auf der aktuellen Seite.
Antwort 9 von rfb
Hoppla, Tippfehler
<div id="box"><a name="bleibhier" href="#bleibhier"> ...Antwort 10 von Knogger
Steh grad etwas auf schlauch..
also der link sollte eigentlich gar keiner sein!
Was ich will, ist, dass die box beim überstreicheln mit der maus die bilder anzeigt, aber ein klicken müsste gar nicht möglich sein, brauch ich net.
was auf keinen fall sein sollte, ist, wenn ein link da ist, dass sich beim klicken was verändert...
Wenn ich den code nicht im frame abspiele, macht der ie das auch so, nur im frame kommt dann die meldung: seite nicht gefunden!
Aber wie gesagt, wegenmir, sollte es nur nen hovereffekt geben und keinen link!!!!
MfG
also der link sollte eigentlich gar keiner sein!
Was ich will, ist, dass die box beim überstreicheln mit der maus die bilder anzeigt, aber ein klicken müsste gar nicht möglich sein, brauch ich net.
was auf keinen fall sein sollte, ist, wenn ein link da ist, dass sich beim klicken was verändert...
Wenn ich den code nicht im frame abspiele, macht der ie das auch so, nur im frame kommt dann die meldung: seite nicht gefunden!
Aber wie gesagt, wegenmir, sollte es nur nen hovereffekt geben und keinen link!!!!
MfG
Antwort 11 von rfb
Zitat:
Aber wie gesagt, wegenmir, sollte es nur nen hovereffekt geben und keinen link!!!!
wie gesagt: geht nicht, der IE ist zu weit zurück in der Browserentwicklung.Aber wie gesagt, wegenmir, sollte es nur nen hovereffekt geben und keinen link!!!!
Also gehts nur mit Link - und die Variante in A8/9 versucht wenigstens erst gar keine andere Seite zu laden.
Antwort 12 von Knogger
rfb, ich danke dir für deine ausführung, jedoch funktioniert das bei mir nicht, ich schätz das muss noch was ins css, oder?
das komische ist, dass es bei folgendem code, welchen ich als test aufgestellt habe, funktioniert; dabei bleibt auch beim klicken der inhalt des fensters, wie er ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
margin:;
}
#box a {
color:#000000;
background:#FFFFFF;
font:bold 10pt verdana, sans-serif;
text-decoration:none;
display:block;
width:70px;
padding:5px;
border:0px solid black;}
#box a:hover {
color:#0033FF;
background:white;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:10px;right:10px;z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px black;
}
-->
</style>
</head>
<body>
<div id="box"><a href="#">PKPL45<span><img src="PKPL45/Internet01.JPG" width="492" height="378"></span></a><a href="#">PKPL35<span><img src="PKPL45/Internet02.JPG" width="492" height="378"></span></a></div>
</body>
</html>
DANKE!!!
das komische ist, dass es bei folgendem code, welchen ich als test aufgestellt habe, funktioniert; dabei bleibt auch beim klicken der inhalt des fensters, wie er ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
margin:;
}
#box a {
color:#000000;
background:#FFFFFF;
font:bold 10pt verdana, sans-serif;
text-decoration:none;
display:block;
width:70px;
padding:5px;
border:0px solid black;}
#box a:hover {
color:#0033FF;
background:white;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:10px;right:10px;z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px black;
}
-->
</style>
</head>
<body>
<div id="box"><a href="#">PKPL45<span><img src="PKPL45/Internet01.JPG" width="492" height="378"></span></a><a href="#">PKPL35<span><img src="PKPL45/Internet02.JPG" width="492" height="378"></span></a></div>
</body>
</html>
DANKE!!!
Antwort 13 von rfb
nun bleibt nur noch zu rätseln, was du per PHP-include eigentlich an den Anfang der Seite setzt (vor den html-tag, was sowieso nicht zulässig ist)
Dass das Setzen eines Links auf einen Anker in derselben Seite nicht klappt ist eigentlich extrem unwahrscheinlich, daher vermute ich, dass du mittels PHP irgendwelche kontraproduktiven Anweisungen in den Code setzt.
Dass das Setzen eines Links auf einen Anker in derselben Seite nicht klappt ist eigentlich extrem unwahrscheinlich, daher vermute ich, dass du mittels PHP irgendwelche kontraproduktiven Anweisungen in den Code setzt.
Antwort 14 von Knogger
Das PHP ist aus Versehen darin gelandet, hab´s grade entfernt, jedoch funktioniert das , was ich will immernoch nicht...
Vermute, dass das irgendwie an dem Frame liegt...
Wie gesagt ausserhalb funzt das ganze...
Wenn Dir oder einem anderen noch was einfällt, gebt bitte feedback!
Thx
Vermute, dass das irgendwie an dem Frame liegt...
Wie gesagt ausserhalb funzt das ganze...
Wenn Dir oder einem anderen noch was einfällt, gebt bitte feedback!
Thx
Antwort 15 von rfb
Hast du den code wirklich mal so wie in A8/9 eingebaut?
Und dann versucht dein Frameset eine andere Seite (vergeblich) zu laden?
Das tät mich wundern!
Kannst du mal einen Link zu deiner Seite angeben? Ich würd mir das Ganze mal gern im (Frameset-)Zusammenhang anschauen.
Und dann versucht dein Frameset eine andere Seite (vergeblich) zu laden?
Das tät mich wundern!
Kannst du mal einen Link zu deiner Seite angeben? Ich würd mir das Ganze mal gern im (Frameset-)Zusammenhang anschauen.
Antwort 16 von Solo
Hi, wenn du mit Frames arbeitest, dann musst du im a-Tag auch das Zielfenster mit target="Name des Zielfensters" angeben.
Ausserdem würde ich hier http://www.w3.org/TR/html4/strict.dtd nicht mit strict.dtd arbeiten sondern mit transitional.dtd.
Die Kopfzeile müsste so lauten:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
anstatt so
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
MfG
Ausserdem würde ich hier http://www.w3.org/TR/html4/strict.dtd nicht mit strict.dtd arbeiten sondern mit transitional.dtd.
Die Kopfzeile müsste so lauten:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
anstatt so
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
MfG
Antwort 17 von rfb
Zitat:
Hi, wenn du mit Frames arbeitest, dann musst du im a-Tag auch das Zielfenster mit target="Name des Zielfensters" angeben.
das stimmt so nicht. Hi, wenn du mit Frames arbeitest, dann musst du im a-Tag auch das Zielfenster mit target="Name des Zielfensters" angeben.
targettargetAntwort 18 von Solo
Sorry, ich bin davon ausgegangen, dass er mit Frameset arbeitet, siehe deine @rfb Antwort 15.
Antwort 19 von rfb
@Solo:
auch dann ist
auch dann ist
target