alt="..." optisch ändern + auf/zu funktion

[Rosette]

Hallo ich habe eine Frage zu den 2 Themen, hoffe die gehören in den bereich HTML, wobei ich mir nicht ganz sicher bin ob sie nicht zu JavaScript oder so gehören...:

1.
Mit alt="..." kann ich einen Text anzeigen lassen, wenn ich über eine Grafik fahre. Ist es möglich das ich das Aussehen verändern kann, damit es nicht diesen gelbton als hintergrundfarbe hat?

Ich würde gerne die Hintergrundfarbe und rahmen verändern (also hintergrund zB grau und 50% transparent und den rahmen gestrichelt in weiß).

2.
Auf sehr vielen Seiten gibt es doch diese "Mehr lesen..." Links, wenn man drauf klickt erscheint der restliche text drunter. Ich würde dafür gerne eine Grafik verwenden, dass, wenn man draufklickt der restliche text angezeigt wird und wieder verschwindet. (so wie die spoiler funktion in manchen foren)


vielen dank schonmal im Voraus, Rosette

 

[Broken Sword]

Hi,
zu 1. Mit "alt =''" wird NUR beim IE beim während dem Rüberfahren Text angezeigt. Der eigentlich Befehl dafür heißt "title=''". Alt dient nur dafür, wenn das Bild nicht vorhanden ist, einen alternativen Text anzuzeigen.
Aber dieses Feld (ob alt oder title) kannst du nicht mit CSS oder sonstwie beeinflussen, weil das von dem Betriebssystem coleriert wird.

2. Das ist kein Problem, du musst einfach anstatt dem Text ein Bild hinsetzen und nur den "onclick"-Code kopieren.

Gruß

 

[RobbyLee]

Meiner Meinung nach gehört das beides in JavaScript.

Ich kann 0 Javascript, deswegen kann ich nur meine Vorgehensweise schildern.

Du musst den alt-tag zwar ins img element reinpacken aber komplett leer lassen.

Per Javascript machst du dann einen mouseover Effekt, der eine Bildbeschreibung in deinem gewünschten Format anzeigen lässt.

das 2. is wie Brokensword schon sagte indem du den Link um das "mehr lesen" einfach ins Image element kopierst:

[IMG]https://finale.freesoft-board.to/XX[/IMG]

oder wenn das zb. durch php reguliert wird

[IMG]https://finale.freesoft-board.to/xx.php?readmore=1[/IMG]

Kommt halt drauf an wie das geregelt wird.

 

[Rosette]

Danke Leute, ich brauche nur einen Code damit das ganze funktioniert, ich weis leider nicht wie das mit punkt 1 funktionieren soll

 

[Broken Sword]

1)
Also als JavaScript würde ich das hier verwenden:

Dazu brauchst du nur noch eine Div-Box mit der id "Info" und ein Bild welches du mit onmousemove und onmouseout atributen bestückst. Bsp:

[IMG alt="alt"]http://Bild.jpg[/IMG]

Das wäre alles.

2)
Hier benutzt du als Script:

Und hier einfach nur noch ein Bild mit dem JavaScript-Befehl ausstatten und alle sind glücklich

Der TExt wird verschwinden... oder auch nicht

(Hier kannst du mit der id arbeiten, damit du auch mehrere Spoiler gleichzeitig anbieten kannst.)

Hoffe, ich konnte dir helfen.


Gruß

 

[Rosette]

der code ist toll danke, nur muss ich ein kleines problem lösen bevor ich es einbaun kann^^

1. Im IE (bei mir 7) wir ein text vertikal mittig angezeigt, obwohl der code angibt das er oben stehen soll.
http://img442.imageshack.us/img442/2421/imiedv7.jpg

2. Im FF bzw Sea Monkey wird der text richtig angezeigt, dafür ist aber eine Menge Abstand nach dem Ende der Seite.
http://img161.imageshack.us/img161/6655/imffck9.jpg


Hier der Code für die Seite:

content="text/html; charset=iso-8859-1">






[CENTER][TABLE]

[TR]

[RIGHT][td][RIGHT][IMG]http://www.freesoft-board.to/images/pixelspace.gif[/IMG][/RIGHT][/td][/RIGHT][td]



[CENTER][TABLE]

[TR]

[td]Hier kommt noch ein Name hin![/td]
[/TR]

[TR]

[td]



[TABLE]

[TR]

[td]Startseite[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Forum[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Team[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Animes[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Render[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Links[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[td]Kontakt[/td][td][IMG]http://www.freesoft-board.to/images/navline.jpg[/IMG][/td]
[/TR]

[/TABLE]



[/td]

[/TR]

[/TABLE]




[TABLE]

[TR]

[td]

[LIST]

[*]Link

[*]Link

[*]Link

[*]Link

[*]Link

[*]Link

[*]Link

[*]Link

[/LIST]





 


Ich bin eine Inhaltsbox.

Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.

Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.



Ich bin eine zweite Inhaltsbox.

Das Layout der Boxen für zb. Schriftart, Schriftgrösse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe, 

Randabstand o.ä. kann in der Datei format.css (dort bei ".box") angepasst werden.


Ich bin die dritte Inhaltsbox.

Hier Platz für weiteren Inhalt z.b. Text oder Grafiken.

Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.



 



[/td]






[td] [/td]
[/TR]

[TR]

[td]

[HEADING=1]Die Startseite.[/HEADING]

Hier findest du ein paar Informationen über diese Seite!



[/td]


[/TR]

[TR]

[td]
Webseitenname - hab noch keinen


Text - fällt mir keiner ein

Domain - noch am überlegen[/td]
[/TR]

[/TABLE][/CENTER]


[td][IMG]http://www.freesoft-board.to/images/pixelspace.gif[/IMG][/td][/td]



[/TR]

[/TABLE][/CENTER]

Hier der Code im CSS:

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #e6e6e6; background-image: url(images/bgmuster.gif); 

background-repeat:repeat-xy;
}

table,td {font-size: 97%;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#000;
}

h2{ font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;color:#4F94CD;
margin-bottom:20px;letter-spacing:2px;font-size: 125%;
border-bottom:solid 0px #746b64;
padding-bottom:4px
}


.li {
width:14px;
background-image:url(images/ra1.png);
background-repeat:repeat-y;
vertical-align:top;
border-right:solid 0px #BFBFBF;
}


.re {
width:14px;
background-image:url(images/ra2.png);
background-repeat:repeat-y;
vertical-align:top;
border-left:solid 0px #BFBFBF;
}


/* hauptgerüst */

#main {
border-bottom:solid 1px #fff;
border-right:solid 1px #fff;border-left:solid 1px #fff;

}

#top {background-image:url(images/bild.jpg);
height:260px;
border-top:solid 1px #fff;
border-left:solid 1px #fff;
color:#2A3C22;
background-color:#ffffff;
background-repeat:no-repeat;
}

#hpname {height:90px;padding-right:10px;padding-top:10px;text-align:right;color:#000;
letter-spacing:1px;font-size:14px;font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-style:italic;
background-color:white;



}

/* menue oben */


.buleiste {
vertical-align:top;
height:30px;background-color:white;
background-image:url(images/navleiste.jpg);
background-repeat:repeat-x;
border-top:solid 1px #C4C4C4;}

#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
color:#fff;

text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 0px #AAAAAA;
line-height:36px;
text-align:center;
background-image:url(images/navleiste.jpg);
}


#menu2 a:hover {background-color:#fff;color:#000000; text-decoration:none ;
background-image:url(images/hover.gif);
border-left:solid 0px #fff;
border-bottom:solid 0px #E6E6E6;
border-top:solid 0px #fff;
}



#sp2 {text-align:justify; 
vertical-align:top;
padding-left: 30px;
padding-right:30px;
padding-top: 40px;
padding-bottom: 40px;
background-color:#fff;
width:100%;
}


#fussb {font: normal 12px verdana, sans-serif; color: #000;
height:70px;
text-align:center;
border-top:solid 1px #bfbfbf;
background-color:#fefefe;
line-height:16px


}

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #737b66; scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #737b66; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}




/* menue */

#menu01 {

border: dashed 0px #fff;
background-color:#6699CC;
text-align: left;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-bottom:10px;
padding-top:10px;
}

#menu01 ul, #menu01 li {
list-style-type: square;
margin-left:10px;
padding: 0px;
color:#fff2a7
}
#menu01 li a:link, #menu01 li a:visited, #menu01 li a:active {display:block;
border-bottom: dashed 0px #C2631D;
width:200px;
color:#fff;text-decoration:none;
font-size: 14px;georgia, verdana, arial, helvetica, verdana, tahoma, sans-serif;
height: 16px;
line-height: 16px;
background-color:#;
}

#menu01 li a:hover { background:TRANSPARENT;
color:#fff482;
text-decoration:underline;
letter-spacing:0px;


}

.box1{background-color:#A3C2D9;
padding-left:5px;
padding-right:5px;
padding-top:15px;
padding-bottom:15px;
font: normal 11px/18px verdana, sans-serif; color: #384E2C;border-TOP:solid 0px #FFF;
width:220px;}

.box2 {background-color:#6699CC;
padding-left:5px;
padding-right:5px;
padding-top:15px;
padding-bottom:15px;
font: normal 11px/18px verdana, sans-serif; color: #29334E;border-TOP:solid 1px #FFF;
width:220px;}

.box3{background-color:#A3C2D9;
padding-left:5px;
padding-right:5px;
padding-top:15px;
padding-bottom:15px;
font: normal 11px/18px verdana, sans-serif; color: #384E2C;border-TOP:solid 1px #FFF;
width:220px;}

.trenn1 {background-color:#CFDCE6;
background-repeat:repeat-y;
padding-left:5px;
padding-right:5px;
padding-top:15px;
padding-bottom:15px;
font: normal 11px/18px verdana, sans-serif; color: #29334E;
border-bottom:solid 1px #FFF;border-TOP:solid 1px #FFF;
width:220px;
height:100%}

.trenn2 {background-color:#99CCFF;
padding-left:5px;
padding-right:5px;
padding-top:15px;
padding-bottom:15px;
font: normal 11px/18px verdana, sans-serif; color: #29334E;
border-bottom:solid 1px #FFF;border-TOP:solid 1px #FFF;
width:220px;
height:10px}

/* allgemeine links im text */

a:link, a:visited, a:active{ font-size: 98%;
font-family: arial, helvetica, verdana, tahoma, sans-serif;color:#4F94CD}

a:hover{ text-decoration:none;background-color:#CAE1FF;
color:#000;}

 

[MeX]

das hat sich wohl erledigt!?

~ C L O S E D ~

ceeyaa.mex