linkstyle's bei pics wollen nicht wie in css deklariert

Status
Nicht offen für weitere Antworten.
ohio

ohio

Erfahrenes Mitglied
guden,

hab da ein eher mäßiges problemchen mit linkcolors. ich declariere die links, hover, usw in einer css include'ten datei, wunderbar bei text! wenn ich nun einen link setzte und ein bild als darstellung benutze -->

Code: 
<a href="index2.php?wohin=daily" onfocus="if(this.blur)this.blur()"><img src="img/menu_01_a.jpg" border="1" width="110" height="70" onMouseover="boxOn(this,'daily')" onMouseout="boxOff(this)"></a>

so sind die linkfarben die typischen standard farben, blau -> link und lila -> visited. am js scheint es nicht zu liegen, ohne ist der selbe effekt festzustellen. wenn ich zwischen meine ganzen menupics einfach mal nen textlink mache, so wird er korrekt dargestellt. ich vezweifle woran es liegen könnte. hat jemand ne ahnung?

gruss ohio
 
nicht der text, sonder der rahmen des "link-bildes" ist blau, das ganze ist noch etwas komplizierter, hat vielleicht noch mit dem js zu tun was ich für die rahmen farbe benutze, aber alles der reihe nach...
zunächst deklariere ich js ->

Code: 
<style>
<!--

.BorderOn  { border:1px solid #CC0000 }
.BorderOff { border:1px solid #000000 }

//-->
</style>

<script language="JavaScript1.2">

offMessage ="<?=$wohin?>"


function boxOn(which,message){
   if (document.all||document.getElementById){
      which.className='BorderOn'
      if (document.getElementById) {document.getElementById("Message").innerHTML = message}
         else {Message.innerHTML = message}
   }
}

function boxOff(which){
   if (document.all||document.getElementById){
      which.className='BorderOff'
      if (document.getElementById) {document.getElementById("Message").innerHTML = offMessage}
         else {Message.innerHTML = offMessage}
   }
}

//-->
</script>

mit dem script lässt sich beim mouseover eines jenen bildes ein menuname einblenden, bei mouseout erscheint wieder die aktuelle seite - in var -> $wohin hinterlegt. danach include ich css.style, unter anderem steht dieses hier drin ->

Code: 
a:link { color:#CC0000; text-decoration:none; }
a:visited { color:#CC0000; text-decoration:none; }
a:hover {color: #000000; text-decoration: none; }

mit texten, wie schon erwähnt, funzt es wunderbar. das bild füge ich nun so ein, am besten gleich mehrere zur übersicht der tabellenstruktur:

Code: 
<table border="0" frame="void" align="right">
<tr><td valign="bottom">

<?php 
    echo "<p>";
    echo "<font id='Message' color='#000000'>$wohin</font>";
?>

<a href="index2.php?wohin=daily" onfocus="if(this.blur)this.blur()"><img src="img/menu_01_a.jpg" border="1" width="110" height="70" onMouseover="boxOn(this,'daily')" onMouseout="boxOff(this)"></a>

<img src="img/menu_04_f.jpg" border="1" width="190" height="70" onMouseover="boxOn(this,'gallerie')" onMouseout="boxOff(this)">

<a href="index2.php?wohin=tribut" onfocus="if(this.blur)this.blur()"><img src="img/menu_03_a.jpg" border="1" width="77" height="70" onMouseover="boxOn(this,'tribut')" onMouseout="boxOff(this)"></a>

<img src="img/menu_02_a.jpg" border="1" width="62" height="70" onMouseover="boxOn(this,'myself')" onMouseout="boxOff(this)">

<img src="img/menu_05_a.jpg" border="1" width="137" height="70" onMouseover="boxOn(this,'sign gbook')" onMouseout="boxOff(this)">

<a href="index2.php?wohin=contact" onfocus="if(this.blur)this.blur()"><img src="img/menu_06_a.jpg" border="1" width="103" height="70" onMouseover="boxOn(this,'contact')" onMouseout="boxOff(this)"></a>

<a href="index2.php?wohin=favorites" onfocus="if(this.blur)this.blur()"><img src="img/menu_07_a.jpg" border="1" width="81" height="70" onMouseover="boxOn(this,'favorites')" onMouseout="boxOff(this)"></a>

<table border="0" frame="void" align="right">
<tr><td>

<?php
    echo "<p>";
    include "$wohin.php";
?>

</td></tr>
</table>


da dies recht viel stuff ist, nun noch die ausgeführte version -> index2.php


hoffe da steigt jemand durch! habt dank... gruss ohio.
 
Hy,

da muss ich dir sagen, dass du den Rahmen um Bilder in Verweisen nicht auf diese Art definieren/modifizieren kannst.

Definierst du von vorneherein das Attribut "border", dann gilt für das Bild fortan ständig der Wert dieses border-Attrbutes, sofern er nicht direkt verändert wird.
PHP: 
this.style.border="..."
bei den Event-Handlern einzubauen ist ja möglich und funktionabel.

Lässt du bspw. dein border-Attribut für das Bild weg, dann zeigt die der Browser automatisch den Rahmen um das Bild, sofern es innerhalb der anchor-Tags liegt - in den Browserstandardfarben für Links, wenn keine speziell definiert sind.

Willst du den Rahmen eines Bildes verändern, kannst du das nicht mithilfe der Pseudoformate für Links erreichen, denn die gelten - wie du herausgefunden hast - nur für Text.
Dann musst du halt oben kurz angerissene Variante nehmen und per JavaScript-CSS dynamisch den Wert für das border-Attribut ändern. :)

Tu mir übrigens bitte noch nen Gefallen und schmeiß bei
PHP: 
<script language="JavaScript1.2">
das language-Attribut raus und ersetze es, bzw. ergänze es wenigstens mit
PHP: 
type="text/javascript"
Außerdem hast du auch noch bei deinem JavaScript ein Kommentar-Ende definiert, wo gar kein Kommentar angefangen hat. ;)

hth,
Geist
 
ahoi,

da ich beschämt zugeben muss nicht allzu viel zeit zu haben um mich mit der materie js und css intensiver beschäftigen zu können schlug dein vorschlag leider fehl. ob es nun mein unvermögen ist weiß ich daher nicht. auf jeden fall hab ich dir den gefallen getan und die einleitung vom js geändert und das kommentarende ebenso gelöscht ;)

mein img tag schaut nun so aus ->

Code: 
<a href="index2.php?wohin=daily" onfocus="if(this.blur)this.blur()"><img src="img/menu_01_a.jpg" border="1" width="110" height="70" onMouseover="boxOn(this,'daily')" onMouseout="boxOff(this)" this.style.border="border-color:#FF9999;"></a>

ausgeführt bleibt alles beim alten mit den blauen und lila border-colors, auch habe ich andere sachen versucht um das erscheinungsbild mit

Code: 
this.style.border="..."

zu ändern, jedoch wollte keines so recht klappen. muss ich nicht vielleicht noch was aus dem header ändern? may be this ?? ->

Code: 
<style>
<!--

.BorderOn  { border:1px solid #CC0000 }
.BorderOff { border:1px solid #000000 }

//-->
</style>

reichlich *verwirrt*

gruss ohio
 
Nein, eine Änderung der zentralen CSS-Eigenschaften ist nicht nötig, du regelst das ja direkt am Element dynamisch. :)

Versuch einfach mal:
PHP: 
<a href="..." onfocus="..."><img src="..." border="1" width="110" height="70" onMouseover="boxOn(this,'daily');this.style.borderColor='#FF9999'" onMouseout="boxOff(this);this.style.borderColor='#000000'"></a>
oder was auch immer du für Farben da nutzen willst. :)

Und übrigens danke für die Abänderung - mein Gewissen ist jetzt so rein wie ein Schneehäschen, denn ich habe eine Seele bekehrt. :-)

hth,
Geist
 
mein glückwunsch zum geläuterten gewissenen :D

aber leider nein, es funzt so nicht. vielleicht reden wir auch aneinander vorbei. ich meine zumindest die startwerte(color) der border. wenn ich die page besuche erscheint derzeit lila, nach dem ich ja alle links testhalber schon besucht habe. einmal mit der mouse drüber gegangen, und wieder weg, ist es wie es 'eigentlich' sein sollte -> #000000. vielleicht doch nen anderer weg?

gruss ohio
 
Aso...

Nun du kannst du ja immer noch nen load-Handler setzen und schon hast du den Käse los. :)
PHP: 
<a href="..." onfocus="..."><img src="..." border="1" width="110" height="70" onLoad="this.style.borderColor='#000000'" onMouseover="boxOn(this,'daily');this.style.borderColor='#FF9999'" onMouseout="boxOff(this);this.style.borderColor='#000000'"></a>
Geist
 
ach das ist doch verdammtnochmal zum heulen :/ ...murghhsl!

also mit dem loader funzt die startdarstellung(!!) nun endlich, jedoch bewirkt ja das obige script beim mouseover/out einmal die veränderung des menunamens (klappt) und die veränderung des bordercolors, wie schon beschrieben, durch ->

Code: 
<style>
<!--

.BorderOn  { border:1px solid #CC0000 }
.BorderOff { border:1px solid #000000 }

//-->
</style>

doch nun bleibt der rahmen schwarz. ich schlag jetzt auf die verdammten tasten ein dfasd+koasdgnklg jpaogas jop dsjops ajpo

ach greul, was hab ich bloß getan "ohh herr" ?

gibts nicht nen link-color-attribut was ich da statt dem loader einsetzten könnte?
 
gibts nicht nen link-color-attribut was ich da statt dem loader einsetzten könnte?
Zum Vergrößern anklicken....
Doch gibt es mit
PHP: 
<body link="#000000">
sicher schon, nur wirkt auch das wieder nicht bei Bildern innerhalb von anchor-Tags. :-)

Die CSS-Formatierung mit den Klassen "BorderOn" und "BorderOff" kannst du eigentlich weglassen, da bei dem MouseOver-/MouseOut-Handler ja schon die Färbung des Rahmens einbegriffen ist mit
PHP: 
this.style.borderColor='...'
wenn du ich erinnerst. :)

Hast du eigentlich noch die Pseudo-Formatierungen für Links drinnen?

Und kannst du nochmal bitte genau beschreiben, was wann eintreten soll? ;)

Das kriegen wir heute noch gebacken, versprochen...

Geist
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück