Rahmen um Bild bei maus-over.

Diskutiere mit über: Rahmen um Bild bei maus-over. im Web-Editoren Forum

  1. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    Ich habe folgendes Problem:

    in meiner html-datei ist eine tabelle in Layer eingebaut.
    In dieser tabelle ist ein spalte mit bilder und eine mit texte. Bei anklicken auf den bildern(MAP) wird ein popup fenster aufgerufen.

    Nun meine Frage: (kompliziert zu erklären ... ich versuche es ;-))
    kennt jemand ein javascript oder auch war anderes mit dem ich bei mausover auf den bildern, die in der Spalten sind, einen rahmen zB. rot und 2pt. um das Bild erscheinen könnte?

    Ich habe es mit CSS probiert aber es klappt leider nicht.


    Es wäre toll wenn mir jemand helfen könnte.


    grüße
    sercast
     
  2. Grady

    Grady MacUser Mitglied

    Beiträge:
    2.277
    Zustimmungen:
    0
    Registriert seit:
    25.04.2003
    Mit CSS geht es wunderbar:
    PHP:
    <table border="0">
    <
    tr>
    <
    td>
    <
    div onMouseOver="this.style.border='solid red 2px';" onMouseOut="this.style.border='';">
    <
    img src="bild.gif">
    </
    div>

    </
    td>
    </
    tr>
    </
    table>
    (Referenz, mal wieder: http://selfhtml.teamone.de/javascript/objekte/style.htm)

    Ich würde aber die Tabelle weglassen und alles mit Layern basteln. Das bringt meist mehr Vor- als Nachteile.

    Nachteilig mit dieser CSS-Steuerung ist aber, dass sich das Bild und damit alles folgende verschiebt. Absolute Positionierung ist da auch keine Option, denn dadurch wird deine Seite nicht besser. ;)
    Ich habe das mal unter die Lupe genommen und versucht es mit padding auszugleichen, aber nachdem die Maus wieder vom Layer runter ist, rückt es sich wieder ein - als hätte es nichts gehört von der ursprünglichen Einstellung (padding:2px).

    Das mag auch ein Grund sein, warum viele Webworker lieber ein MouseOver-Bild machen oder Flash nutzen.

    P.S.
    Egal, in welchem Objekt man den MouseOver setzt (<td>,<div>,<img>), bekommt man das gleiche Ergebnis.
     
    Zuletzt von einem Moderator bearbeitet: 24.10.2015
  3. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    vielen dank!!!

    werde ich ja testen bei mir bzw. mit meinen html-kenntnissen
     
  4. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    da ich von PHP keine Ahnung habe ....
    banale frage:
    gibt's eine Farbtabelle woraus ich die Definiktion der Farben in PHP bekommen kann?

    Ich habe natürlich mit den gewöhnliche Farbebeschreibung in html probiert ...es hat nicht geklappt!

    Anmerkung:
    Woran kann es liegen dass es in den bereits bestehenden CSS-Texten der gesamten Seite, nachdem ich dein script platziert habe, plötzlich jeweils einen Abstand zwischen den buchstaben gibt?


    Vielen dank

    sercast
     
  5. Grady

    Grady MacUser Mitglied

    Beiträge:
    2.277
    Zustimmungen:
    0
    Registriert seit:
    25.04.2003
    Was meinst du damit? Etwa die Farben, die hier für das Syntaxhighlighting benutzt wurden?
    Dort steht nur PHP, weil ich mit dem Tag [ Code ] keine vernünftige Ausgabe hier im Forum bekomme. Mit [ php ] geht das hingegen, daher auch die Farben.
    Etwas genauer bitte. Was für Farbbeschreibungen und wie? Link zum Code wär gut.

    Das kann nicht am der CSS-Angabe liegen, wenn du sie so platzierst. Du hast wahrscheinlich woanders noch Änderungen vorgenommen. Wie gesagt, ein Link zu der Seite/dem Code wäre wohl das Beste. ;) Posten kannst du ihn hier natürlich auch, wenn er nicht so lang sein sollte.
     
  6. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    Sorry .... es ist für mich nicht ganz einfach das Problem zu erklären

    Ich meine, du hast "solid red 2px" geschrieben.
    Wie kann ich zB. eine andere Farbe als Rot auswählen?

    Ich benutze mit HTML-Code zB. #CC9933 um eine bestimmte Farbe darzustellen.
    Gibt's eine Farbtabelle für PHP wie in Dreamweaver zu sehen ist?


    Das Problem mit den schriften hat sich geklärt :)


    das izu der Seite:
    http://www.castelli-media.de/referenzen/multimedia_referenzen/multimedia_refer-TEST.htm


    vielen dank
     
  7. Grady

    Grady MacUser Mitglied

    Beiträge:
    2.277
    Zustimmungen:
    0
    Registriert seit:
    25.04.2003
    Du kannst anstatt "solid red 2px" natürlich auch "solid #FF0000 2px" schreiben. Außerdem solltest du echt die ganzen Layouttabellen über Bord werfen, wenn du schon mit CSS und Div richtig arbeiten willst. ;)

    Die ganzen Angaben in den Tabellen lassen sich mit ein paar Layern effizient erledigen. Dann müsste nur noch diese absolute Positionierung weg. ;)

    PHP:
    #divContainer{
        
    position:absolute;
        
    width:400;
        
    height:300;
        
    overflow:hidden;
        
    top:30;
        
    left:10;
        
    clip:rect(0,400,300,0);
        
    visibilityvisible;
    }
    wird einfach zu


    PHP:
    #divContainer{
        
    position:relative;
        
    width:400;
        
    height:300;
        
    overflow:hidden;
        
    padding-top:30;
        
    padding-left:10;
        
    clip:rect(0,400,300,0);
        
    visibilityvisible;
    }
    Achja, das alles hier hat nichts mit PHP zu tun. ;) Es dient nur der besseren Lesbarkeit.
     
  8. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    Vielen dank für den tipp!!!
    ich werde schauenwas machen kann.

    Wenn es alles richtig funktioniert mit tabellen,
    warum sollte ich alles "über Bord werfen"?
     
  9. Grady

    Grady MacUser Mitglied

    Beiträge:
    2.277
    Zustimmungen:
    0
    Registriert seit:
    25.04.2003
    &nbsp;
    Ok, ganz so drastisch ist vielleicht auch nicht das Beste...
    Tabellen sind in HTML mittlerweile eine veraltete Konstruktion, die mit CSS zu 99% überflüssig geworden sind. Will man also nicht rückwärtsgerichtet Seiten erstellen, so kann man es sich und anderen leichter machen mit CSS. Es gibt wesentlich weniger Code und es ist leichter pflegbar.

    Negativbeispiel:
    PHP:
    <td width="62" height="71">&nbsp;</td>
          </
    tr>
          <
    tr
            <
    td width="23" height="17">&nbsp;</td>
            <
    td width="175" height="17">&nbsp; </td>
            <
    td width="16" height="17">&nbsp;</td>
            <
    td width="120" height="17">&nbsp;</td>

            <
    td width="62" height="17">&nbsp;</td>
          </
    tr>
          <
    tr
            <
    td width="23" height="71">&nbsp;</td>
            <
    td width="175" height="71"> <div align="right"> <span class="textBold">Smart 
                Passau
    </span><font size="4"><b><br>
                </
    b></font><span class="textkursiv">Autohaus</span></div></td>
            <
    td width="16" height="71">&nbsp;</td>
    Den Div-Tag hätte man mit allen Infos ausstatten können und hätte zumindest die Span-Tags gespart. Andererseits kann man mit CSS auch einfach der Tabellenzelle eine id geben und alles damit formatieren. Unterebenen können mit ergänzenden Infos formatiert werden, da sie die Formate von den darüberliegenden Ebenen erben.
    Wenn das mal später in größerem Stil geändert werden soll, macht es weniger Arbeit 1X die Styledefinition zu ändern.
     
  10. sercast

    sercast Thread Starter MacUser Mitglied

    Beiträge:
    152
    Zustimmungen:
    1
    Registriert seit:
    22.02.2002
    noch mal danke

    kann du mir ein "Positivbeispiel" davon machen?

    das wäre für mich echt sehr hilfsreich.


    Ich bin grundsätzlich grafiker und muss nur selten Website Programmieren.
    daher kann ich mir nich alles merken.
    Wenn ich mal 2 -3 Wochen hinterenandern mit der HTML Code beschäftigt bin, dann komme es viel wieder von der tiefen meines gehirn(s) – schei.... satz;-!


    grüß
    sercast
     
Die Seite wird geladen...
Ähnliche Themen - Rahmen Bild bei Forum Datum
RW 3.6: Rahmen um Bilder wegbekommen? Web-Editoren 18.06.2008
iWeb Grafik ohne Rahmen darstellen Web-Editoren 26.10.2007
Rahmen um Layer, der eine Flash-Animation hat Web-Editoren 02.06.2006
Nach Theme-Wechsel in RW habe ich einen Rahmen um eine Grafik Web-Editoren 02.06.2006
GoLive Rahmen Aktionen Web-Editoren 23.09.2005

Diese Seite empfehlen