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

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

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

    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
  • 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ß
  • 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:

    HTML-Quellcode

    1. <img src="XX" width="XX" height="XX" onClick="JavaScript Anweisung;" alt="">


    oder wenn das zb. durch php reguliert wird

    HTML-Quellcode

    1. <img src="xx.php?readmore=1" width="XX" height="XX" alt="">


    Kommt halt drauf an wie das geregelt wird.
  • 1)
    Also als JavaScript würde ich das hier verwenden:

    HTML-Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. // Begin Info-Script
    4. var isIE=((browser.indexOf('msie')!=-1) && (browser.indexOf('opera')==-1));
    5. function Info(on, element, event){
    6. if(!on){
    7. var left=element.offsetLeft;
    8. var top=element.offsetTop;
    9. for(var parent=element.offsetParent;parent;parent=parent.offsetParent){
    10. left+=parent.offsetLeft;
    11. top+=parent.offsetTop;
    12. }
    13. document.getElementById('info').style.left='-9000px';
    14. }else{
    15. if(element.alt){
    16. var left=element.offsetLeft;
    17. var top=element.offsetTop;
    18. for(var parent=element.offsetParent;parent;parent=parent.offsetParent){
    19. left+=parent.offsetLeft;
    20. top+=parent.offsetTop;
    21. }
    22. if(isIE){
    23. var plus=document.body.scrollTop;
    24. var plus2=0;
    25. }else{
    26. var plus=0;
    27. var plus2=window.pageYOffset;
    28. }
    29. if(event){
    30. document.getElementById('info').style.left=event.clientX+20+'px';
    31. document.getElementById('info').style.top=event.clientY+plus2-7+'px';
    32. }else{
    33. document.getElementById('info').style.left=left+7+'px';
    34. document.getElementById('info').style.top=top-plus+7+'px';
    35. }
    36. var data='Hier kommt die Beschreibung rein!';
    37. document.getElementById('info').innerHTML=data;
    38. document.getElementById('info').style.display='block';
    39. }
    40. }
    41. }
    42. // End Info-Script
    43. // ]]>
    44. </script>
    Alles anzeigen

    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:

    HTML-Quellcode

    1. <div id="info" style="display:none; position:absolute; border:1px solid #666; padding:5px; background:#fff;">&nbsp;</div>
    2. <img onmousemove="Info(1, this, event);" onmouseout="Info(0, 0, event);" src="http://Bild.jpg" alt="alt" />

    Das wäre alles.

    2)
    Hier benutzt du als Script:

    HTML-Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. // Begin Show/Hide-Script
    4. function sh_hs(uid)
    5. {
    6. if(document.getElementById('sh'+uid).style.visibility == 'hidden') {
    7. document.getElementById('sh'+uid).style.visibility = 'visible';
    8. document.getElementById('sh'+uid).style.display = 'block';
    9. }
    10. else {
    11. document.getElementById('sh'+uid).style.visibility = 'hidden';
    12. document.getElementById('sh'+uid).style.display = 'none';
    13. }
    14. }
    15. // End Show/Hide-Script
    16. // ]]>
    17. </script>
    Alles anzeigen

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

    HTML-Quellcode

    1. <img... onclick="sh_hs(1);" />
    2. <div id="sh1">Der TExt wird verschwinden... oder auch nicht</div>

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

    Hoffe, ich konnte dir helfen.


    Gruß
  • 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.
    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.
    img161.imageshack.us/img161/6655/imffck9.jpg


    Hier der Code für die Seite:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <meta http-equiv="Content-Type"
    4. content="text/html; charset=iso-8859-1">
    5. <title>Webseite</title>
    6. <link rel="stylesheet" href="format.css" type="text/css">
    7. </head>
    8. <body>
    9. <table width="60%" align="center" cellspacing="0" cellpadding="0" border="0">
    10. <tr>
    11. <td align="right" class="li" ><img src="http://www.freesoft-board.to/images/pixelspace.gif" width="1" height="1" border="0" alt=""></td><td>
    12. <!--ende aussentab-->
    13. <table align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
    14. <tr>
    15. <td valign="top" id="hpname">Hier kommt noch ein Name hin!</td>
    16. </tr>
    17. <tr>
    18. <td class="buleiste" >
    19. <!--menü oben-->
    20. <table id="menu2" border="0" cellpadding="0" cellspacing="0">
    21. <tr>
    22. <td><a href="index.html" onfocus="this.blur()">Startseite</a></td><td ><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    23. <td><a href="forum.html" onfocus="this.blur()">Forum</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    24. <td><a href="team.html" onfocus="this.blur()">Team</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    25. <td><a href="animes.html" onfocus="this.blur()">Animes</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    26. <td><a href="render.html" onfocus="this.blur()">Render</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    27. <td><a href="links.html" onfocus="this.blur()">Links</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    28. <td><a href="kontakt.html" onfocus="this.blur()">Kontakt</a></td><td><img src="http://www.freesoft-board.to/images/navline.jpg" width="1" height="36" border="0" alt=""></td>
    29. </tr>
    30. </table>
    31. <!-- ende menü oben-->
    32. </td>
    33. </tr>
    34. </table>
    35. <!--ende oben-->
    36. <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" >
    37. <tr>
    38. <td rowspan="2" id="nav" >
    39. <div id="menu01">
    40. <ul>
    41. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    42. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    43. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    44. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    45. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    46. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    47. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    48. <li><a href="index.html" onfocus="this.blur()">Link</a></li>
    49. </ul>
    50. </div>
    51. <!--MENU 01 ENDE-->
    52. <!--diese box ist im moment leer--><div class="trenn2">&nbsp;</div><!-- ende diese box ist im moment leer-->
    53. <div class="box1">Ich bin eine Inhaltsbox.<br>
    54. Hier Platz f&uuml;r weiteren Inhalt z.b. Text oder Grafiken.<br>
    55. Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br>
    56. </div>
    57. <div class="box2">Ich bin eine zweite Inhaltsbox.<br>
    58. Das Layout der Boxen f&uuml;r zb. Schriftart, Schriftgr&ouml;sse, Schriftstil, Schriftfarbe oder Zeilenabstand sowie Rahmenfarbe, Hintergrundfarbe,
    59. Randabstand o.&auml;. kann in der Datei format.css (dort bei ".box") angepasst werden.
    60. </div>
    61. <div class="box3">Ich bin die dritte Inhaltsbox.<br>
    62. Hier Platz f&uuml;r weiteren Inhalt z.b. Text oder Grafiken.<br>
    63. Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch.<br>
    64. </div>
    65. <!--diese box ist im moment leer--><div class="trenn1">&nbsp;</div><!-- ende diese box ist im moment leer-->
    66. <!-- weiterer Inhalt evt.-->
    67. </td>
    68. <!-- HIER ENDE LINKE SPALTE.-->
    69. <td width="100%" id="top">&nbsp;</td>
    70. </tr>
    71. <tr>
    72. <td valign="top" id="sp2">
    73. <h2>Die Startseite.</h2>
    74. Hier findest du ein paar Informationen über diese Seite!
    75. <br>
    76. <!-- ende inhalt--></td>
    77. </tr>
    78. <tr>
    79. <td colspan="2" id="fussb" width="100%">
    80. Webseitenname - hab noch keinen
    81. <br>
    82. <i>Text - fällt mir keiner ein</i><br>
    83. Domain - noch am überlegen</td>
    84. </tr>
    85. </table>
    86. <td class="re"><img src="http://www.freesoft-board.to/images/pixelspace.gif" width="1" height="1" border="0" alt=""></img></td>
    87. <!-- aussentab-->
    88. </tr>
    89. </table>
    90. </body>
    91. </html>
    Alles anzeigen


    Hier der Code im CSS:

    Quellcode

    1. body
    2. {margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #e6e6e6; background-image: url(images/bgmuster.gif);
    3. background-repeat:repeat-xy;
    4. }
    5. table,td {font-size: 97%;line-height: 125%;
    6. font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#000;
    7. }
    8. h2{ font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;color:#4F94CD;
    9. margin-bottom:20px;letter-spacing:2px;font-size: 125%;
    10. border-bottom:solid 0px #746b64;
    11. padding-bottom:4px
    12. }
    13. .li {
    14. width:14px;
    15. background-image:url(images/ra1.png);
    16. background-repeat:repeat-y;
    17. vertical-align:top;
    18. border-right:solid 0px #BFBFBF;
    19. }
    20. .re {
    21. width:14px;
    22. background-image:url(images/ra2.png);
    23. background-repeat:repeat-y;
    24. vertical-align:top;
    25. border-left:solid 0px #BFBFBF;
    26. }
    27. /* hauptgerüst */
    28. #main {
    29. border-bottom:solid 1px #fff;
    30. border-right:solid 1px #fff;border-left:solid 1px #fff;
    31. }
    32. #top {background-image:url(images/bild.jpg);
    33. height:260px;
    34. border-top:solid 1px #fff;
    35. border-left:solid 1px #fff;
    36. color:#2A3C22;
    37. background-color:#ffffff;
    38. background-repeat:no-repeat;
    39. }
    40. #hpname {height:90px;padding-right:10px;padding-top:10px;text-align:right;color:#000;
    41. letter-spacing:1px;font-size:14px;font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-style:italic;
    42. background-color:white;
    43. }
    44. /* menue oben */
    45. .buleiste {
    46. vertical-align:top;
    47. height:30px;background-color:white;
    48. background-image:url(images/navleiste.jpg);
    49. background-repeat:repeat-x;
    50. border-top:solid 1px #C4C4C4;}
    51. #menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
    52. color:#fff;
    53. text-decoration:none ;font-family:verdana, sans-serif; font-size: 10pt;
    54. padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
    55. margin-left: 0px;margin-right: 0px;
    56. border-left:solid 0px #AAAAAA;
    57. line-height:36px;
    58. text-align:center;
    59. background-image:url(images/navleiste.jpg);
    60. }
    61. #menu2 a:hover {background-color:#fff;color:#000000; text-decoration:none ;
    62. background-image:url(images/hover.gif);
    63. border-left:solid 0px #fff;
    64. border-bottom:solid 0px #E6E6E6;
    65. border-top:solid 0px #fff;
    66. }
    67. #sp2 {text-align:justify;
    68. vertical-align:top;
    69. padding-left: 30px;
    70. padding-right:30px;
    71. padding-top: 40px;
    72. padding-bottom: 40px;
    73. background-color:#fff;
    74. width:100%;
    75. }
    76. #fussb {font: normal 12px verdana, sans-serif; color: #000;
    77. height:70px;
    78. text-align:center;
    79. border-top:solid 1px #bfbfbf;
    80. background-color:#fefefe;
    81. line-height:16px
    82. }
    83. /* scrolleiste internet explorer ab vers.5.5 */
    84. body
    85. {scrollbar-arrow-color: #737b66; scrollbar-base-color: #F5F8F3;
    86. scrollbar-highlight-color : #737b66; scrollbar-shadow-color : #ffffff;
    87. SCROLLBAR-TRACK-COLOR: #e6e6e6;}
    88. /* menue */
    89. #menu01 {
    90. border: dashed 0px #fff;
    91. background-color:#6699CC;
    92. text-align: left;
    93. margin-top:0px;
    94. margin-bottom:0px;
    95. margin-right:0px;
    96. margin-left:0px;
    97. padding-bottom:10px;
    98. padding-top:10px;
    99. }
    100. #menu01 ul, #menu01 li {
    101. list-style-type: square;
    102. margin-left:10px;
    103. padding: 0px;
    104. color:#fff2a7
    105. }
    106. #menu01 li a:link, #menu01 li a:visited, #menu01 li a:active {display:block;
    107. border-bottom: dashed 0px #C2631D;
    108. width:200px;
    109. color:#fff;text-decoration:none;
    110. font-size: 14px;georgia, verdana, arial, helvetica, verdana, tahoma, sans-serif;
    111. height: 16px;
    112. line-height: 16px;
    113. background-color:#;
    114. }
    115. #menu01 li a:hover { background:TRANSPARENT;
    116. color:#fff482;
    117. text-decoration:underline;
    118. letter-spacing:0px;
    119. }
    120. .box1{background-color:#A3C2D9;
    121. padding-left:5px;
    122. padding-right:5px;
    123. padding-top:15px;
    124. padding-bottom:15px;
    125. font: normal 11px/18px verdana, sans-serif; color: #384E2C;border-TOP:solid 0px #FFF;
    126. width:220px;}
    127. .box2 {background-color:#6699CC;
    128. padding-left:5px;
    129. padding-right:5px;
    130. padding-top:15px;
    131. padding-bottom:15px;
    132. font: normal 11px/18px verdana, sans-serif; color: #29334E;border-TOP:solid 1px #FFF;
    133. width:220px;}
    134. .box3{background-color:#A3C2D9;
    135. padding-left:5px;
    136. padding-right:5px;
    137. padding-top:15px;
    138. padding-bottom:15px;
    139. font: normal 11px/18px verdana, sans-serif; color: #384E2C;border-TOP:solid 1px #FFF;
    140. width:220px;}
    141. .trenn1 {background-color:#CFDCE6;
    142. background-repeat:repeat-y;
    143. padding-left:5px;
    144. padding-right:5px;
    145. padding-top:15px;
    146. padding-bottom:15px;
    147. font: normal 11px/18px verdana, sans-serif; color: #29334E;
    148. border-bottom:solid 1px #FFF;border-TOP:solid 1px #FFF;
    149. width:220px;
    150. height:100%}
    151. .trenn2 {background-color:#99CCFF;
    152. padding-left:5px;
    153. padding-right:5px;
    154. padding-top:15px;
    155. padding-bottom:15px;
    156. font: normal 11px/18px verdana, sans-serif; color: #29334E;
    157. border-bottom:solid 1px #FFF;border-TOP:solid 1px #FFF;
    158. width:220px;
    159. height:10px}
    160. /* allgemeine links im text */
    161. a:link, a:visited, a:active{ font-size: 98%;
    162. font-family: arial, helvetica, verdana, tahoma, sans-serif;color:#4F94CD}
    163. a:hover{ text-decoration:none;background-color:#CAE1FF;
    164. color:#000;}
    Alles anzeigen