Mouseovereffekt (HTML, CSS und Javascript)

[thread]2172[/thread]

Mouseovereffekt

youngalcapone

2003-12-08 18:39

User since
2003-08-14
185 Artikel
BenutzerIn
[default_avatar]

Aloha!
Ich muss für eine Webseite einen Mouseovereffekt schreiben. Dazu habe ich vor längerer Zeit mal diese zwei Skripts gespeichert:

Code: (dl )

1
2

<a href="http://www.drweb.de/trickkiste/tricks48.shtml" onMouseOver="image.src='images/bild1.jpg';" onMouseOut="image.src='images/bild2.jpg';">
<img name="image" src="images/bild2.jpg" border="0" ></a>

Code: (dl )

<html>
<head>
<title>Hover-Grafiken</title>
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
var know1=new Image();
know1.src="know1.gif";
var know2=new Image();
know2.src="know2.gif";
var service1=new Image();
service1.src="service1.gif";
var service2=new Image();
service2.src="service2.gif";
}
else {
alert("Leider haben Sie einen zu alten Browser");
}
//-->
</script>
</head>
<body bgcolor="white">

<a href="http://www.knowware.de" onMouseover="document.know.src=know2.src" onMouseout="document.know.src=know1.src"><img src="know1.gif" width="101" height="25" border="0" name="know" id="know" /></a>

</body></html>

Welches der beiden ist am professionellsten?
Ich meine das erste würde mir ja besser gefallen, aber das zweite hat eine if-Kontrollstruktur um zu sehen ob der User einen zu alten Browser hat....

Am liebsten würde ich zwar anstatt Grafiken zu nehmen, das ganze mit CSS realisieren, aber so kommts halt wenn man mit Grafikern zusammenarbeitet....!

Gruss, Dave\n\n

Strat

2003-12-08 18:58

User since
2003-08-04
5246 Artikel
ModeratorIn

wenn du beim zweiten noch einen <noscript>-Teil einbaust (wie auch immer der aussehen mag), muesste es auch mit leuten, die javascript nicht deaktiviert haben, funktionieren

perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/

KKO

2003-12-09 22:00

User since
2003-11-05
124 Artikel
BenutzerIn

user image

bei der 2. version werden alle bilder erstmal geladen, das könnte unter umständen das anzeigen des body verzögern. das document.image-objekt wird ab N3 und MS4 und JS 1.1 unterstützt. wenn irgendwo in der welt einer noch einen älteren browser benutzen sollte, wieso sollte er dann auch noch ausgerechnet auf deine seite kommen? :-)
also wird es wohl eher vorkommen, dass jemand JS ausgeschaltet hat und dann sieht er die meldung nicht. es ist die frage, inwieweit das 2. bild wichtig ist.
du könntest in dem fall höchsten noch mit alt=Information im img-tag noch eine weitere information unterbringen.
also....ich denke der 1. script langt vollkommen

Gruß
KKO

format_c

2003-12-09 22:47

User since
2003-08-04
1706 Artikel
HausmeisterIn

Also ich finde die 1. Version auch am besten wobei mir die 2. unheimlich bekannt vorkommt ;P.

IN wie weit, das letztentlich die verschiedenen Browser unterstützen musst du entweder austesten, oder es kann dir egal sein.
Wenn wenn jemand so schlau ist, Opera benutzt und das Ding kastriert bis zum Anschlag, bringt jeder Rollover effekt nix.

Vor allem wenn so leute wie z.B.: Relais die noch mit Text-Browsern durch die Welt ziehen ist das setzten des alt-Attributes des img-Tags enorm wichtig. Wichtiger als ein für alle browser funktionierende Rollovereffekt.

Gruß Alex.

Effizente Linuxshell

youngalcapone

2003-12-09 23:24

User since
2003-08-14
185 Artikel
BenutzerIn
[default_avatar]

Also so:

Code: (dl )

1
2

<a href="index.html" onFocus="if(this.blur)this.blur()" onMouseOver="image.src='home_aktiv.gif';" onMouseOut="image.src='home_passiv.gif';">
<img name="image" alt="Home" width="83" height="29" src="home_passiv.gif" border="0" ></a>

mit alt-Tag, onFocus und ich hab noch ne Grössenangabe reingemacht, ist sie richtig so, oder muss ich die noch irgendwie in den JS-Code reinpacken?

Danke schon im Voraus!
Gruss, Dave

format_c

2003-12-09 23:50

User since
2003-08-04
1706 Artikel
HausmeisterIn

Gehts denn?

Ich muss gestehen, ich weis es nicht auf Anhieb.

Gruß Alex

Effizente Linuxshell

KKO

2003-12-10 15:58

User since
2003-11-05
124 Artikel
BenutzerIn

user image

hallo,
die größenangaben sind o.k., weil der browser dann schon den platz auf der seite für die grafik reserviert, obwohl das bild noch nicht geladen ist.
warum willst du den cursor vom bild nehmen?
blur() funktioniert in dem fall nicht
(ist für formular-elemente gedacht)

Gruß
KKO

youngalcapone

2003-12-10 19:46

User since
2003-08-14
185 Artikel
BenutzerIn
[default_avatar]

Mit diesem Scriptteil wollte ich eigentlich dass man um den Button keine gepunktete Umrandung sieht wenn er aktiv ist...
Aber hab grad erfahren dass das die Navigation per TAB-Taste verunmöglicht und das will ich natürlich nicht!

[E|B]

2003-12-10 20:17

User since
2003-08-08
2561 Artikel
HausmeisterIn

Welcher Browser unterstützt denn bitte keine "images"?! :o/

Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]

youngalcapone

2003-12-10 20:33

User since
2003-08-14
185 Artikel
BenutzerIn
[default_avatar]

@EB: falls die frage an mich geht?
onFocus="if(this.blur)this.blur()" habe ich weggenommen, weil man dann nur wenn man mit ner Maus arbeitet drauf klicken kann, ohne Maus / Trackball oder mit Braille wirds wohl schwierig....

View all threads created 2003-12-08 18:39.