Mittwald CM Service: TYPO3-Hosting, TYPO3-Schulungen, Agenturpakete, Managed-Server
Optimiertes TYPO3 Hosting von Mittwald CM Service
FORUM » TypoScript » Barrierefreiheit

Accessible menü mit Bild und unsichtbarem Text wurde Beantwortet

Autor Nachricht
Verfasst am: 29.01.2009 [18:32]
SimonSchaufi


[Themenersteller]
dabei seit: 05.03.2008
Beiträge: 6
 Hallo!
Ich habe schon das Forum durchsucht aber bisher keinen Eintrag gefunden, der mir hilft, mein Problem zu lösen.

Ich möchte gerne einen Menü erstellen, das so aussieht:

<ul>
<li><a href="[link]"><span class="hidden">[hier der Menütext]</span><img src="spacer.gif" /></a></li>
</ul>

Der Benutzer soll dann auf das Bild klicken können, den Text aber nur sehen, wenn er CSS ausschaltet.

Kann mir jemand mit dem TYPOScript helfen? -> wie wrappe ich das?
http://www.gottkennen.com • http://www.gottliebtsie.de
Verfasst am: 30.01.2009 [08:11]
jenses


dabei seit: 12.08.2004
Beiträge: 2133
 Z.B. so hier:

Typoscript:Zeilennummerierung:  An / Aus

  1. /******
  2. *
  3. *
  4. accessible GTMenu
  6. Published in: TYPO3
  8. URL: http://www.gtmenu.de
  10. Using this TypoScript,
  11. you can build an accessible GTMenu which may fully be styled using CSS.
  12. We propose using this instead of ANY GMENU which creates ugly code.
  14. It renders a simple TMENU,
  15. and wraps an IMG_RESOURCE into the ATagParams by making this a cObject.
  16. There will be a podcast on typo3.org sometime soon.
  18. Please note:
  19. in order to use {TSFE:lastImgResourceInfo|0}
  20. (which reads the width of the last image generated by the gifbuilder)
  21. you need TYPO3 4.1
  23. *
  24. *
  25. *******/
  26.  
  27.  
  28. ### TypoScript ###
  29.  
  30. lib.gtmenu = HMENU
  31. lib.gtmenu {
  32.         1 = TMENU
  33.         1 {
  34.                 wrap = <ul id="navi">|</ul>
  35.                 NO.doNotLinkIt = 1
  36.                 NO.wrapItemAndSub = <li>|</li>
  37.                 NO.stdWrap.cObject = COA
  38.                 NO.stdWrap.cObject {
  39.                         10 = TEXT
  40.                         10 {
  41.                                 field = title
  42.                                 typolink {
  43.                                         parameter.field = uid
  44.                                        
  45.                                         ATagParams.cObject = COA
  46.                                         ATagParams.cObject {
  47.                                                 10 = IMG_RESOURCE
  48.                                                 10.file = GIFBUILDER
  49.                                                 10.file {
  50.                                                         XY = [10.w]+[20.w]+10,70
  51.                                                         transparentColor = #ffffff
  52.                                                         10 = TEXT
  53.                                                         10 {
  54.                                                                 text.field = subtitle//title
  55.                                                                 fontSize = 14
  56.                                                                 fontFile=fileadmin/fonts/DINPro-Bold.otf
  57.                                                                 offset = 5,20
  58.                                                                 fontColor = #787879
  59.                                                         }
  60.                                                        
  61.                                                         20 = BOX
  62.                                                         20 {
  63.                                                                 dimensions = 0,30,[10.w]+[20.w]+10,30
  64.                                                                 color = #e53827
  65.                                                         }
  66.                                                        
  67.                                                         30 = TEXT
  68.                                                         30 < .10
  69.                                                         30 {
  70.                                                                 offset = 5,50
  71.                                                                 fontColor = #ffffff
  72.                                                         }
  73.                                                 }
  74.                                                 10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"
  75.                                         }
  76.                                 }
  77.                         }
  78.                 }
  79.         }
  80. }
  81.  
  82.  
  83.  
  84. ### CSS ###
  85.  
  86. ul#navi {list-style: none;}
  87. ul#navi li {float: left;}
  88. ul#navi li a {background-repeat:no-repeat; display:block; overflow:hidden;text-indent: 999em; white-space:nowrap; height:30px;}
  89. ul#navi li a:hover, ul#navi li.current a,ul#navi li.over a {background-position:0px -30px;}
  90.  


Das Bild wird dabei als CSS-Hintergrundbild eingebunden und nicht als image-tag,
das ist semantisch sauberer...
www.smedja.com - prof. Webseiten mit TYPO3, Extension-Entwicklung, XHTML strict&trans, CSS2 ...
Verfasst am: 30.01.2009 [14:40]
SimonSchaufi


[Themenersteller]
dabei seit: 05.03.2008
Beiträge: 6
 Auf den ersten Blick glaube ich, dass das Script nicht das macht, was ich gerne hätte.

Mein bisheriges Script sieht so aus:

Typoscript:Zeilennummerierung:  An / Aus

  1. ## Sub Menu [Begin]
  2. temp.submenu = HMENU
  3. temp.submenu.entryLevel = 2
  4. temp.submenu{
  5.   1 = TMENU
  6.   1 {
  7.     expAll=1
  8.     wrap=<ul class="nav3">|</ul>
  9.     NO {
  10.           afterImg=fileadmin/templates/main_2/spacer.gif
  11.           afterImgLink=1
  12.           doNotShowLink=1
  13.           allWrap=<li>|</li>
  14.     }
  15.   }
  16.   1.ACT < NO
  17.   1.ACT = 1
  18.   1.ACT {
  19.           afterImg=fileadmin/templates/main_2/spacer.gif
  20.           afterImgLink=1
  21.           doNotShowLink=1
  22.           allWrap=<li>|</li>
  23.           ATagParams=class="active"
  24.   }
  25. }


was hier aber fehlt ist der Menütext. den hätte ich wie gesagt gerne in einem span, der mit css versteckt wird.
http://www.gottkennen.com • http://www.gottliebtsie.de
Verfasst am: 05.02.2009 [16:49]
SimonSchaufi


[Themenersteller]
dabei seit: 05.03.2008
Beiträge: 6
 Lösung (zwar nicht ganz so wie ich wollte, aber fast):
Typoscript:Zeilennummerierung:  An / Aus

  1. temp.submenu = HMENU
  2. temp.submenu {
  3.     entryLevel = 2
  4.     1 = TMENU
  5.     1.wrap = <ul class="nav3">|</ul>
  6.     1 {
  7.         NO {
  8.             wrapItemAndSub = <li><span class="hidden">|</li>
  9.             stdWrap.append = COA
  10.             stdWrap.append {
  11.                 9 = HTML
  12.                 9.value = </span>
  13.                 10 = IMAGE
  14.                 10.file = fileadmin/templates/main_2/spacer.gif
  15.                 10.altText.field = title
  16.                 10.titleText.field = title
  17.             }
  18.         }
  19.     }
  20.     1.ACT < NO
  21.     1.ACT = 1
  22.     1.ACT {
  23.         wrapItemAndSub = <li><span class="hidden">|</li>
  24.         stdWrap.append = COA
  25.         stdWrap.append {
  26.             9 = HTML
  27.             9.value = </span>
  28.             10 = IMAGE
  29.             10.file = fileadmin/templates/main_2/spacer.gif
  30.             10.altText.field = title
  31.             10.titleText.field = title
  32.         }
  33.         ATagParams=class="active"
  34.     }
  35. }


[Dieser Beitrag wurde 2 mal bearbeitet. Zuletzt am 05.02.2009 um 16:52]
http://www.gottkennen.com • http://www.gottliebtsie.de
Verfasst am: 16.04.2009 [20:31]
fantasmo

dabei seit: 05.11.2008
Beiträge: 7
 Ich möchte eigentlich genau so etwas machen, allerdings kein Menü (das hab ich schonmal gemacht, auch mit TS... ging gut).

Ich möchte das bei Texten/Inhaltselementen machen.
Dass der Redakteur also einen Text eingibt...z.B. eine Bedienungsanleitung... der Redakteur soll aber dann die Möglichkeit haben, dass er ein Bild (z.B. eine Grafik, die schön bildlich erklärt, wie man z.B. eben den Videorecorder anschaltet) hochlädt (also ohne TS-Schreiberei, sondern per Bild-Upload-Dialog).
Dieses Bild soll dann den Text ersetzen (Prinzip: text-indent).

Das selbe Prinzip wär auch für Überschriften toll. Text eingeben, hinter dem verbirgt sich eigentlich eine 08/15 Arialschrift und dann lädt man aber ein Bild hoch, wo die Überschrift durch z.B. eine toll gezeichnete kleine Grafik ersetzt wird.

Das alles, "Texte/Listen und Überschriften durch Bilder ersetzen" hab ich schon sehr oft, bei Internetseiten gesehen, gehe aber davon aus, dass die Leute das dort ohne CMS einfach im HTML-Code und in der CSS geregelt haben.
Ich suche eben eine Möglichkeit, wie ich das komfortabel für Typo3-Redakteure machen könnte... Also eine Extension wär toll, hab aber bislang nichts gefunden und weiß auch nicht so recht wie man dieses Verfahren vielleicht nennt.
Verfasst am: 16.04.2009 [20:41]
SimonSchaufi


[Themenersteller]
dabei seit: 05.03.2008
Beiträge: 6
 das macht doch der GIF Builder oder?

zeigt mal bissle HTML Code, dass man sich das vorstellen kann, wie das nachher aussehen soll.

PS: eigentlich solltest du ein neues Thema aufmachen, da es nicht direkt hiermit was zu tun hat.

[Dieser Beitrag wurde 1 mal bearbeitet. Zuletzt am 16.04.2009 um 20:42]
http://www.gottkennen.com • http://www.gottliebtsie.de



Impressum  | Kontakt  | TYPO3 Hosting  | TYPO3 Schulungen

  
TYPO3 Hosting in der Version 4.3.2 kostenlos bei Mittwald CM Service testen

TYPO3 4.3.2 jetzt testen

Testen Sie die neue TYPO3 Version 4.3.2 kostenlos für einen Monat


Entwicklerschulungen