mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 03.10.2022 09:51 Benutzername: Passwort: Auto-Login

Thema: Rolloverbild ändert die Farbe von statischem Textlink. WIE? vom 26.12.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Rolloverbild ändert die Farbe von statischem Textlink. WIE?
Seite: 1, 2  Weiter
Autor Nachricht
flashnik
Threadersteller

Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 54
Geschlecht: Männlich
Verfasst Mi 26.12.2007 11:33
Titel

Rolloverbild ändert die Farbe von statischem Textlink. WIE?

Antworten mit Zitat Zum Seitenanfang

Hallo Mediengestalters,

wie gestaltet ihr die Postnatale Zeit???

Ich zermartere mir mein Hirn ob der Frage, wie code ich in Dreamwaver folgendes Szenario:

Habe einen statischen (Hyper)Textlink und ein Rolloverbild, die designmässig aufeinander abgestimmt sind und zum gleichen Ziel verweisen. Das Rolloverbild verändert sich bei MouseOver nicht, soll aber die Farbe des Hyperlinks auf MouseOver (A;HOVER) schalten, auch wenn die Maus nur über dem Rolloverbild ist.

Vor einiger Zeit habe ich das mal beim Rumprobieren in Dreamwaver entdeckt, es ging ganz einfach.... Habe es aber lange nicht gebraucht, so ist es "weg", darum wäre ich wirklich sehr froh über das Weihnachtsgeschenk in Form eines sachdienlichen Tip's!!! Die schier unendliche Suche in diesem oder jenem Forum blieb bis jatzt auch ohne Frucht...

Danke für einen Tip,

flashnik
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 49
Geschlecht: Männlich
Verfasst Do 27.12.2007 11:20
Titel

Antworten mit Zitat Zum Seitenanfang

kommt ein wenig auf die struktur des codes an... sind bild und link in einem <a>-tag, oder sind sie in unterschiedlichen?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
flashnik
Threadersteller

Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 54
Geschlecht: Männlich
Verfasst Do 27.12.2007 11:33
Titel

Antworten mit Zitat Zum Seitenanfang

Hi, so sieht das aus codemässig:

für den Textlink dies

Code:
<span class="but_aktuell" ><a href="news/aktuell.html" target="_self">Aktuell</a></span>


und für's Rollover

Code:
<a href="news/aktuell.html" class="ha_aktuell_but" onmouseover="MM_swapImage('aktuell','','but/had_aktu_but1.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="but/had_aktu_but1.jpg" name="aktuell" width="111" height="33" border="0" id="aktuell" /></a>


Also in unterschiedlichen <a> tag.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 49
Geschlecht: Männlich
Verfasst Do 27.12.2007 11:43
Titel

Antworten mit Zitat Zum Seitenanfang

da ich nicht mit dw arbeite, kann ich dir nicht sagen, ob es eine "klickbare" lösung innerhalb von dw gibt.

die programmierlösung wäre wie folgt:

a) wenn es dein layout zulässt einfach beides in ein <a>-tag unterbringen, oder

b) dem bild sagen, dass es bei mouseover/mouseout auch den dazugehörigen textlink anpasst.
wäre wohl am einfachsten, die mm_funktionen anzupassen... dafür müsste man sie aber kennen *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
flashnik
Threadersteller

Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 54
Geschlecht: Männlich
Verfasst Do 27.12.2007 12:00
Titel

Antworten mit Zitat Zum Seitenanfang

demnach Variante "b"

das css sieht so aus:

Code:


body {

   background-color:#CCCCCC;
}a, a:active  {
   font-family:Verdana;
   font-size: 10px;
   text-decoration: none;
   color: #333333;
}a, a:visited,   {
   font-family:Verdana;
   font-size: 10px;
   text-decoration: none;
   color: #FF6600;
}a:hover {
   font-family:Verdana;
   font-size: 10px;
   text-decoration: none;
   color: #FF6600;
}.but_aktuell {
   position: absolute;
   top: 113px;
   left: 50%;
   margin-left: 13px;
   z-index: 20;
}.ha_aktuell_but {
   position: absolute;
   top: 112px;
   left: 50%;
   margin-left: 9px;
   z-index: 10;
}


but_aktuell = textLink

ha_aktuell_but = Rollover
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 49
Geschlecht: Männlich
Verfasst Do 27.12.2007 12:24
Titel

Antworten mit Zitat Zum Seitenanfang

bei variante b wollen wir aber das JS und nicht das css manipulieren *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
flashnik
Threadersteller

Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 54
Geschlecht: Männlich
Verfasst Do 27.12.2007 12:32
Titel

Antworten mit Zitat Zum Seitenanfang

UPS....

Code:

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}
//-->
</script>


Nun ist aber das Scriptchen für schliesslich und endlich alle (sechs) Rollover's und nicht nur für das Eine...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 49
Geschlecht: Männlich
Verfasst Do 27.12.2007 13:27
Titel

Antworten mit Zitat Zum Seitenanfang

da ich sehe, dass die swap_image geschichte für dein bild völlig unnötig ist (da diese nicht ausgetauscht werden) und ich auch ungerne in den mm_funktionen rumwerke (weiß ja nicht, wo man sie sonst noch braucht) habe ich hier einen alternativern lösungsanatz:

ergänze das js um folgende funktion:
Code:

function SwapTextLink(linkid,klasse)
{
   document.getElementById(linkid).className= klasse;
}


ergänzung im css (beispielhaft):
Code:

.TextLink_hover {
         font-family: Verdana;
         font-size: 10px;
         text-decoration: none;
         color: #FF6600;
         }
.TextLink_normal  {
         font-family:Verdana;
         font-size: 10px;
         text-decoration: none;
         color: #333333;
         }



ergänze deinen texlink wie folgt:
Code:

<span class="but_aktuell" ><a href="news/aktuell.html" class="TextLink_normal" id="TextAktuell"  target="_self">Aktuell</a></span>


und dein verlinktes bild sieht nun so aus:
Code:

<a href="news/aktuell.html" class="ha_aktuell_but" onmouseover="SwapTextLink('TextAktuell','TextLink_hover')" onmouseout="SwapTextLink('TextAktuell','TextLink_normal')"><img src="but/had_aktu_but1.jpg" name="aktuell" width="111" height="33" border="0" id="aktuell" /></a>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Flash-Galerie - Farbe ändert sich?
Photoshop ändert farbe beim speichern
[Scriptsuche] Rolloverbild auf www.fourmusic.com
mouseover-effekt auf textlink?
Submit Button to Textlink
Flash Textlink Cursor ändern
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.