Hover Effect

    Ich mach gerade ein paar Homepages zum über da ich diese sprachen noch nicht sehr lange beherrsche. Also wollt ich nen hover effekt rechts von meiner vertikalen navi machen. Wie muss ich das angehen? Ich wei� zwar wie ich das ganze mache das der Link sich färbt aber sonst weis ich nichts =(.
    Es gibt sicher welche hier im Forum die sich damit auskennen!!

    Nein, dass ist es auch nicht, hab hier mal ein Bild hochgeladen damit ihr euch das ungefähr vorstellen könnt.
    Der Kreis neben Menü soll sich bewegen, je nach dem, wo man mit der Maus drüber fährt


    Hier das Bild


    EDIT: Ich habs schonmal so hingebracht, das der Punkt unter dem Text ist, ich brauch also nur mehr wissen wie ich den Punkt neben den Text hinbekomme. Hab den "margin" Befehl schon versucht aber iergendwie will dass nicht gehen.

    Cross Browser kompatibel ist per css nen hover effect allein zu machen nicht.


    Der Internet Explorer ignoriert CSS befehle ala "element:hover" ...etc...
    Du solltest für den hover effect auch javascript ala "<img onhover="javascript:alert(1);" verwenden.

    [SIZE=1]..2x2m Programmierboxen mit Neonlicht, sind definitiv geil!..[/SIZE]
    [SIZE=2]
    &quot;just find an easy way into the database...&quot;    [/SIZE]
    [SIZE=1]~ the default is never good enough...


    [/SIZE]

    Ich mach den Hover bisher immer mit Java Script:


    [HTML]<script language="JavaScript">
    <!--
    function na_change_img_src(name, nsdoc, rpath, preload)
    {
    var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
    if (name == '')
    return;
    if (img) {
    img.altsrc = img.src;
    img.src = rpath;
    }
    }


    function na_preload_img()
    {
    var img_list = na_preload_img.arguments;
    if (document.preloadlist == null)
    document.preloadlist = new Array();
    var top = document.preloadlist.length;
    for (var i=0; i < img_list.length-1; i++) {
    document.preloadlist[top+i] = new Image;
    document.preloadlist[top+i].src = img_list[i+1];
    }
    }


    function na_restore_img_src(name, nsdoc)
    {
    var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
    if (name == '')
    return;
    if (img && img.altsrc) {
    img.src = img.altsrc;
    img.altsrc = null;
    }
    }


    // -->
    </script>
    <a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'sig1.png', true)"><img src="sig2.png" width="390" height="84" border="0" name="image1"></a>[/HTML]

    Ich brauch nur mehr wissen wie man den Punkt jetzt positioniert. Hab schon margin und padding versucht aber iergendwie geht das nicht. Der Punkt ist links etwas nach unten versetzt, ich will ihn aber rechts ovn der Schrift und etwas in die höhe versetzten. Wie mach ich das?

    Oh man...was seid ihr für? 1. Lassen wir javascript mal ganz aus dem spiel 2. geht es mit CSS in allen Browsern. Mach das ganze einfach mit einem a-tag dann klappt das immer du kannst dem a-tag einfach eine klasse gegben.


    Code
    1. <a class=&quot;link&quot; href=&quot;#&quot;>test</a>


    Dann CSS


    Code
    1. .link:hover {
    2. background-image:url(deinbild.gif);
    3. background-repeat:no-repeat;
    4. background-position:0px 3px;
    5. }


    So das wars...natürlich solltest du vorher noch dein link mit (jenachdem wie gro� das bild ist) padding-left:10px; versehen dann klappt das....und falls du es als block level element brauchst machst du bei der klasse link halt noch ein display:block; dazu und kannst dann die höhe und breite angeben...


    EDIT: // Ich sehe gerade du willst die grafiken rechts haben dannn machste einfach background-position:right 3px; und halt das padding nach rechts....


    Mfg

    Stimmt Pseudoklassen werden von ie<6 ja akzeptiert nur in a Tags...ok hab ich nich mit gedacht.


    @ Threadersteller


    Beispielcode...dieser ist SEO technisch gesehen besser als nur reine links.


    [SIZE=1]..2x2m Programmierboxen mit Neonlicht, sind definitiv geil!..[/SIZE]
    [SIZE=2]
    &quot;just find an easy way into the database...&quot;    [/SIZE]
    [SIZE=1]~ the default is never good enough...


    [/SIZE]

    Die Methode von [N.e.0] hat wunderbar funktioniert. DANK!!! Hab noch ein wenig an der position was machen müssen aber das wars auch schon.
    Aufjedenfall ein groÃ?es DANKESCHÃ?N!!!

    1 problem hab ich noch. Es geht jetzt zwar das wenn ich mit der Maus über die Links fahr das ein Bild daneben erscheint, aber wenn ich auf die links klicke soll dort das Bild aber bleiben. Momentan wenn ich draufklicke ist dann neben dem Link kein Bild zu sehen.
    Wisst ihr was ich meine?