| Autor |
Nachricht |
flashnik
Threadersteller
Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 55
Geschlecht: 
|
Verfasst Mi 26.12.2007 11:33
Titel Rolloverbild ändert die Farbe von statischem Textlink. WIE? |
  |
|
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
|
|
| |
   |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 27.12.2007 11:20
Titel
|
|
|
|
kommt ein wenig auf die struktur des codes an... sind bild und link in einem <a>-tag, oder sind sie in unterschiedlichen?
|
|
| |
|
|
|
Anzeige
|
|
|
flashnik
Threadersteller
Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 55
Geschlecht:
|
Verfasst Do 27.12.2007 11:33
Titel
|
|
|
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.
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 27.12.2007 11:43
Titel
|
|
|
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 
|
|
| |
|
|
flashnik
Threadersteller
Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 55
Geschlecht:
|
Verfasst Do 27.12.2007 12:00
Titel
|
|
|
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
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 27.12.2007 12:24
Titel
|
|
|
|
bei variante b wollen wir aber das JS und nicht das css manipulieren
|
|
| |
|
|
flashnik
Threadersteller
Dabei seit: 13.05.2007
Ort: Bärschwil
Alter: 55
Geschlecht:
|
Verfasst Do 27.12.2007 12:32
Titel
|
|
|
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...
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 27.12.2007 13:27
Titel
|
|
|
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>
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Photoshop ändert farbe beim speichern
Flash-Galerie - Farbe ändert sich?
[Scriptsuche] Rolloverbild auf www.fourmusic.com
Submit Button to Textlink
mouseover-effekt auf textlink?
Textlink per CSS auf fett ändern
|
|
Willkommen auf dem Portal für Mediengestalter
