Mouseover - Effekt

Status
Nicht offen für weitere Antworten.
L

Lars_oe

Grünschnabel
N'abend.
Ich habe folgende Vorstellung, die ich auch schon ein paar Mal im Netz gesehen habe:

Man fährt mit der Maus über den Bereich A und Bereich B zeigt dann die Informationen X an.

Verständlich ?!

Also,
3 Bilder nebeneinander, wenn man mit der Maus über Bild A fährt wird woanders eine angegebene Information angezeigt, nicht die gleiche Information wie bei dem Bild 2 und 3.

Kann man das realisieren ? Nur ich habe weder eine Vorstellung wie, noch einen Lösungsansatz.


Eine andere Idee die mir gerade in den Sinn schießt ist, dass ich mal versucht habe aufklappbare Menüs einzubauen... Gibt es eine Möglichkeit sie nicht absolute zu positionieren ?


wer gucken möchte was ich damit anstellen will:
http://www.toywut.de/index.php?content=galerie

ich möchte den Galerien einige Informationen zuordnen, die man dann auf einen Blick erhält. Die Informationen sind alle schon abrufbar, ich weiß nur noch nicht wie es tun soll... wenn Du eine gute Idee hast, poste es !

Vielen Dank für Anregungen!
oe
 
IM HEAD SOLLTE FOLGENDES STEHEN
Code: 
<script>
/*Rollover effect on different image*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>

<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("bild1_gross.jpg","bild2_gross.jpg","bild3_gross.jpg")
</script>


UND IM BODY AN DER STELLE WO DU DAS BILD WILLST FOLGENDES

<a href="#" onMouseover="changeimage(myimages[0],this.href)"><img src="bild1_klein.jpg" height="80" border="0" alt="Bild1"></a>

<a href="#" onMouseover="changeimage(myimages[1],this.href)"><img src="bild2_klein.jpg" height="80" border="0" alt="Bild2"></a>

<a href="#" onMouseover="changeimage(myimages[2],this.href)"><img src="bild3_klein.jpg" height="80" border="0" alt="Bild2"></a>

Hoffe damit geholfen zu haben.

Gruss aus der Schweiz
 
hm... So wie ich das verstehe ist das ein Rollover-Bild, oder ?!
geh mal auf http://www.toywuthier und du siehst was ich genau meine...

alle informationen z.b. X mal angeguckt und den Galeriename möchte ich irgendwie verstecken.

ist das mit deiner methode möglich ?!

Danke,
oe
 
HEAD
<!-- generelle schriftformatierung für die Box -->
<style type="text/css">
<!--
td {
font-family:verdana,arial,helvetica;
font-size:8px;
color:#000000;
}
-->
</style>
<script type="text/javascript" language="JavaScript1.1">
<!-- Original: Patrick Lewis, mod: W. Jansen -->
<!--

if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

descarray = new Array("<span style='font-family:verdana,arial; color:#000000;font-size:10px;font-weight:normal;'>HIER DIE INFO REIN</span>"
// :::::::::: Text Infobox

);
overdiv="0";
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>Dieses PopUp (#"+a+") ist nicht korrekt definiert - Beschreibung fehlt</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
<!-- hier werden Größe, Farbe der Infobox festgelegt-->
desc = "<table cellspacing=0 cellpadding="+pad+" border="+bord+" bgcolor=C6DA00><tr><td>\n"
+"<table cellspacing=0 cellpadding=2 border=0 width=100%><tr><td bgcolor=FFFBE7><center><font size=0>\n"
+descarray[a]
+"\n</td></tr></table>\n"
+"</td></tr></table>";
if(navigator.family =="nn4") {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+15;
document.object1.top=y-5;
}
else if(navigator.family =="ie4"){
object1.innerHTML=desc;
object1.style.pixelLeft=x+15;
object1.style.pixelTop=y-5;
}
else if(navigator.family =="gecko"){
document.getElementById("object1").innerHTML=desc;
document.getElementById("object1").style.left=x+15;
document.getElementById("object1").style.top=y-5;
}
}

function hideLayer(){
if (overdiv == "0") {
if(navigator.family =="nn4") {eval(document.object1.top="-500");}
else if(navigator.family =="ie4"){object1.innerHTML="";}
else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
}
}

var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){

// Plazierung neben Mauszeiger
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;

}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
// End -->
</script>

BODY
<!-- ::::::::::::::::::::: div-definition :::::::::::::::::::::::-->
<div id="object1" style="position:absolute; background-color:C6DA00; color:black; border-color:black; border-width:1; left:25px; top:-100px; z-index:1; overflow: auto;" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer </div>
<!-- ::::::::::::::::::::: /div-definition :::::::::::::::::::::::-->

<p>Sie finden hier auch Informationen über <a href="xxx.html" onMouseOver="popLayer(0)" onMouseOut="hideLayer()">XXX</a>.


------------

Hab den Code eben schnell kopiert. Hoffe, es ist was du brauchst und es funktioniert (is übrigens irgendwo von ner free-script seite....)
 
Zuletzt bearbeitet:
Lars_oe:

Du könntest die Elemente, die angezeigt werden sollen, per CSS positionieren, allen einen Namen geben und dann onmouseover anzeigen lassen.

Sollte in etwa so aussehen ("java script" muss zusammengeschrieben werden):

Code: 
<html>
<head>

<script type="text/javascript">

function showinfo(infoname) {
 document.infoname.visibility = "show";
}

function hideinfo(infoname) {
 document.infoname.visibility = "hide";
}
</script>

</head>

<body>

<div style="position:absolute:left:500px;top:100px" name="info1">Info 1</div>
<div style="position:absolute:left:500px;top:100px" name="info2">Info 2</div>

<!-- usw. -->

<a href="#" onmouseover="javascript:showinfo('info1')" onmouseout="javascript:hideinfo('info1')">Info 1 zeigen</a><br>
<a href="#" onmouseover="javascript:showinfo('info2')" onmouseout="javascript:hideinfo('info2')">Info 2 zeigen</a><br>

</body>
</html>


aka_marcus: Bitte halte dich doch an die Netiquette, insbesondere Punkt 12.
 
Hi,

wenn Du schon eine Seite kennst die so aufgebaut ist wie Deine, dann schau doch einfach mal kurz in den Quellcode der Seite ;-).

Der Effekt den Du haben möchtest lässt sich am einfachsten mit Div-Containern realisieren. Aber das weißt Du ja schon von Sebastian :-)

Gruss,

Bugs
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück