Rahmen um Bild bei maus-over.

sercast

Aktives Mitglied
Thread Starter
Dabei seit
22.02.2002
Beiträge
152
Reaktionspunkte
1
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
 
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 bearbeitet von einem Moderator:
vielen dank!!!

werde ich ja testen bei mir bzw. mit meinen html-kenntnissen
 
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
 
Original geschrieben von sercast
da ich von PHP keine Ahnung habe ....
banale frage:
gibt's eine Farbtabelle woraus ich die Definiktion der Farben in PHP bekommen kann?
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.

Ich habe natürlich mit den gewöhnliche Farbebeschreibung in html probiert ...es hat nicht geklappt!
Etwas genauer bitte. Was für Farbbeschreibungen und wie? Link zum Code wär gut.

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?
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.
 
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
 
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);
	visibility: visible;
}

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);
	visibility: visible;
}

Achja, das alles hier hat nichts mit PHP zu tun. ;) Es dient nur der besseren Lesbarkeit.
 
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"?
 
Original geschrieben von sercast
Wenn es alles richtig funktioniert mit tabellen,
warum sollte ich alles "über Bord werfen"?
&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.
 
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
 
So!

ich habe ein paar anpassungen/schönheitskorrektur (noch offline) gemacht.

Aber jetzt würde ich gerne eine kleine Anpassung machen wofür ich keine lösung kenne..


ich würde gerne der folgende code ( onMouseOver="this.style.border='solid #CC9966 2px';" onMouseOut="this.style.border='';"
 
Original geschrieben von sercast
kann du mir ein "Positivbeispiel" davon machen?
Dafür hab ich jetzt auch keine Zeit. Es funktioniert ja jetzt so, aber wenn du in Zukunft weitere Sites machen willst, dann verwende doch div-tags. Mit Dreamweaver geht das relativ einfach aufzubauen.


Original geschrieben von sercast
So!

ich habe ein paar anpassungen/schönheitskorrektur (noch offline) gemacht.

Aber jetzt würde ich gerne eine kleine Anpassung machen wofür ich keine lösung kenne..


ich würde gerne der folgende code ( onMouseOver="this.style.border='solid #CC9966 2px';" onMouseOut="this.style.border='';"
Was würdest du damit machen wollen? Ihn auslagern , um nicht jedes Mal den im Source stehen zu haben?

Dazu müsstest du eine Funktion nehmen, die dann jeweils die Formatierung macht bei onMouseOver.

PHP:
<script language="JavaScript1.2">
function over_out(){ 
var x;
x=this.style.border='solid #CC9966 2px';
return x;
}

</script>
Allerdings muss dann auch in jedem IMG-Tag
PHP:
<img src="" onMouseOver="Javascript:over_out();">
stehen.
Das bringt also nicht viel.
 
Hey
vielen dank für die hilfe
ich habe es gerade probiert ... es funktioniert nicht bei mir.

habe probiert in IMG sowie in TD-tag

Ich weiss nicht wo der fehler liegt.

Hast du es bei dir getestet?

grüß
 
Zurück
Oben Unten