BlackBoard » Design, Programmierung & Entwicklung » Webdesign » Mouseover Effekt. » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Mouseover Effekt.
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
ZeRo
Aufsteiger


images/avatars/avatar-229.gif

Dabei seit: 03.06.2004
Beiträge: 98

Mouseover Effekt.       Zum Anfang der Seite springen

Ich suche nach einer Möglichkeit des folgenden Problemes:


Ich möchte, dass wenn man mit der maus über einen Punkt fährt, dass dann an einem andern Ort ein Bild und neben dem Bild ein Text erscheint… wie mache ich das ?

Java ? Html ?
05.11.2004 17:46 ZeRo ist offline E-Mail an ZeRo senden Beiträge von ZeRo suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

Achtung       Zum Anfang der Seite springen

JavaScript. Zum Beispiel so:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<div id="hilightzeug" style="visibility: hidden">
  <img src="eintollesbild.jpg" alt="">
  mit noch tollerem Text daneben.
</div>

[...]

<img src="einfetterpunkt.gif" alt=""
 onmouseover="document.getElementById('hilightzeug').style.visibility='visible'"
 onmouseout="document.getElementById('hilightzeug').style.visibility='hidden'">


__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

05.11.2004 17:50 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
R2__ R2__ ist männlich
Aufsteiger


images/avatars/avatar-1864.jpg

Dabei seit: 04.10.2004
Beiträge: 34
Herkunft: /home/R2

      Zum Anfang der Seite springen

oder das ....

hoffe du kommst damit klar. Im Head brauchst du nichts umstellen.

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
<html>
<head>
<title>Test
</title>

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>

</head>
<body>

<a href="Link.html" onMouseOut="MM_swapImgRestore()" 

onMouseOver="MM_swapImage('name','','zweitesBild.jpg',1);MM_showHideLayers('Layer1','','hide','Layer2','','hide')"><im

g name="name" border="0" src="erstesBild.jpg" width="150" height="50"></a>
</body>
</html>


__________________
DAUs sind auch nur Menschen ?

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von R2__: 10.11.2004 14:52.

10.11.2004 14:50 R2__ ist offline Homepage von R2__ Beiträge von R2__ suchen
Wenso Wenso ist männlich
Amokschläfer


images/avatars/avatar-1991.gif

Dabei seit: 25.02.2002
Beiträge: 1.715
Herkunft: Hessen

      Zum Anfang der Seite springen

also ich finde LX' Möglichkeit deutlich besser, da sie mit weniger Code auskommt und verständlicher ist!

R2: das ist doch der Code, den Macromedia benutzt bei solchen Sachen!
Und da ist auch unnötiges dabei, wenn man nur einen Bild-Wechsel machen will!

Mfg wenso

__________________
Pipi Langstrumpf ist KRIEG!!!
~for those about to rot~
welcome to where time stands still
no one leaves and no one will

10.11.2004 17:31 Wenso ist offline E-Mail an Wenso senden Homepage von Wenso Beiträge von Wenso suchen
ZeRo
Aufsteiger


images/avatars/avatar-229.gif

Dabei seit: 03.06.2004
Beiträge: 98

Themenstarter Thema begonnen von ZeRo
      Zum Anfang der Seite springen

Zitat:
Original von LX
JavaScript. Zum Beispiel so:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<div id="hilightzeug" style="visibility: hidden">
  <img src="eintollesbild.jpg" alt="">
  mit noch tollerem Text daneben.
</div>

[...]

<img src="einfetterpunkt.gif" alt=""
 onmouseover="document.getElementById('hilightzeug').style.visibility='visible'"
 onmouseout="document.getElementById('hilightzeug').style.visibility='hidden'">


Mit dem komme ich nun ganz gut zurecht vielen dank...


Nun habe ich nich folgende 2 Probleme:

Wie kann ich machen, dass anstatt dem Punkt, man über eine Schrift fahren muss, damit das ganze erscheint ?

Und wie kann ich sagen, wo der Text und das Bild erscheinen sollen ?
11.11.2004 08:43 ZeRo ist offline E-Mail an ZeRo senden Beiträge von ZeRo suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

      Zum Anfang der Seite springen

Zitat:
Original von ZeRo
Wie kann ich machen, dass anstatt dem Punkt, man über eine Schrift fahren muss, damit das ganze erscheint ?
code:
1:
<span onmouseover="..." onmouseout="...">dein toller Text</span>


Zitat:
Und wie kann ich sagen, wo der Text und das Bild erscheinen sollen ?
Setze die oberen 4 Codezeilen (also die DIV und das dazwischen) an die Stelle im Code, wo du's eben hinhaben willst. Du kannst ja erstmal das visibility: hidden weglassen, um die Position zu überprüfen.

__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

11.11.2004 14:24 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
DunklerMond DunklerMond ist männlich
SeelenWächter


images/avatars/avatar-134.gif

Dabei seit: 06.10.2002
Beiträge: 119
Herkunft: beinahe Düsseldorf

      Zum Anfang der Seite springen

Ich habe das ganze mit CSS gestaltet

ungefähr so....

Zitat:

<style type="text/css">
#menu {
position:absolute; top:500px; left:300px; font-size:12pt;}
/* NS braucht width nur, um Menue in senkr. block darst. zu koennen, hier weggelassen */

#navi {
}

#navi a:link {text-decoration: none; color: #cccccc;cursor:crosshair;width:70px;}

#navi a:visited {text-decoration: none; color: #AA0000;cursor:crosshair;
}

#navi a:hover {text-decoration: none; color: #FF0000; background-color: #555555;cursor:crosshair;font-size: 14pt;
}

#navi a:active {text-decoration: none; font-style: italic; color: #AA0000;cursor:crosshair;
}

#navi a .showcase {
display: none; }

#navi a:hover .showcase {
position:absolute; width:300px; height:120px; top:-180px; left:60px;
display:block; background:#333333; border:solid 1px; color:#607E9F;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt; }

/* Unterschied block/inline nur bei NS */
</style>



....

und dort wo der Link dann (kann auch normaltext sein,musst dann nur dementsprechend variabel setzen)

Zitat:

<div id="menu">
<div id="navi"; >

[<a href="musikwelt/index.htm" title="BandLyrics" style=""onmouseover="window.status='www.md-fan.de | copyright by DreamerM 1997-2004 | Zugriff auf die BandLyrics dieser Seite';return true"> Welt der Musik
<span class="showcase">
<img src="image/musik.jpg" border=0 height="98" weight="87" alt=""></img>
<br>
Hier findest du BandLyrics von mir gern gehörte Bands</span>
</a>]

[<a href="bildausschnitt/index.htm" style=""onmouseover="window.status='www.md-fan.de | copyright by DreamerM 1997-2004 | Bilder Bilder Bilder';return true" title="Der Bilderrahmen als Fenster für den Voyeur"> Leben im Bildausschnitt
<span class="showcase">
<img src="image/bild.jpg" border=0 height="100" weight="98" alt=""></img>
<br>
Bilder nicht nur von mir, sondern von wichtigen Menschen und was mir vor die Linse kam
</span>
</a>]
[<a href="seelenwelt/index.htm" style=""onmouseover="window.status='www.md-fan.de | copyright by DreamerM 1997-2004 | Meine Seele, meine Texte und Gedichte - alles über mein Ich';return true" title="Wer steckt hinter diesen worten?!"> GedankenWelt
<span class="showcase"; font-size:100%;>
<img src="image/chain.jpg" border=0 height="90" weight="90" alt=""></img>
<br>
Gedanken, Texte, Erinnerungen, Gedichte, Fragebogen
</span>
</a>]


</div>
</div>


__________________

Das Schicksal beschützt Narren, kleine Kinder und Schiffe mit dem Namen Enterprise

11.11.2004 15:08 DunklerMond ist offline E-Mail an DunklerMond senden Homepage von DunklerMond Beiträge von DunklerMond suchen
ZeRo
Aufsteiger


images/avatars/avatar-229.gif

Dabei seit: 03.06.2004
Beiträge: 98

Themenstarter Thema begonnen von ZeRo
      Zum Anfang der Seite springen

ok hat sich erledigt vielen dank nochmals !
11.11.2004 16:55 ZeRo ist offline E-Mail an ZeRo senden Beiträge von ZeRo suchen
ZeRo
Aufsteiger


images/avatars/avatar-229.gif

Dabei seit: 03.06.2004
Beiträge: 98

Themenstarter Thema begonnen von ZeRo
      Zum Anfang der Seite springen

Nun such ich nach einer Lösung, dass wenn man über ein Bild fährt, dieses durch ein anderes ersetzt wird, finde unter selfhtml, jedoch nicht's nicht's entsprechendes.
14.11.2004 20:56 ZeRo ist offline E-Mail an ZeRo senden Beiträge von ZeRo suchen
DunklerMond DunklerMond ist männlich
SeelenWächter


images/avatars/avatar-134.gif

Dabei seit: 06.10.2002
Beiträge: 119
Herkunft: beinahe Düsseldorf

      Zum Anfang der Seite springen

st doch recht eifnach ...

das kannste mit javascripot machen


lädst ein bild bei Mousover und eins bei mousout .... dars wars

__________________

Das Schicksal beschützt Narren, kleine Kinder und Schiffe mit dem Namen Enterprise

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von DunklerMond: 14.11.2004 21:33.

14.11.2004 21:31 DunklerMond ist offline E-Mail an DunklerMond senden Homepage von DunklerMond Beiträge von DunklerMond suchen
ZeRo
Aufsteiger


images/avatars/avatar-229.gif

Dabei seit: 03.06.2004
Beiträge: 98

Themenstarter Thema begonnen von ZeRo
      Zum Anfang der Seite springen

^^ lol ich depp ... danke Augenzwinkern
14.11.2004 22:12 ZeRo ist offline E-Mail an ZeRo senden Beiträge von ZeRo suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » Mouseover Effekt.

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH