|
|||
Grafiken nach .ENDUNG mit oder ohne Rand
Hallo,
ich hab mich totgegoogelt, aber offenbar gibt es einen Tag wie ich ihn suche nicht. Problem: Alle Grafken im BODY-Container sollen je nach Typ (jpg/png) zum einen mit Rand, zum anderen ohne Rand formatiert sein. Mit IMG schlecht möglich, der nimmt alles. Beispiel Original Tag: #body img { border: 2px solid #FFFFFF; margin: 5px; } Gewünscht: #body (WENN JPG) { border: 0px solid #FFFFFF; margin: 5px; } #body (WENN PNG) { border: 2px solid #FFFFFF; margin: 5px; } Am besten definiert in einem Tag. Ist das mit CSS überhaupt möglich? Vielen Dank schonmal im vorraus. |
Sponsored Links |
|
||||
Mit CSS 3:
Code:
img[src$=".jpg"] { /* code für jpg */ } img[src$=".png"] { /* code für png */ } Web Browser CSS Support Selbst testen kannst du das hier: CSS3: Attribute selectors - CSS3 . Info |
Sponsored Links |
|
||||
Zitat:
|
|
|||
Hallo,
Danke für die Antworten. Die Seite ist auschließlich HTML mit css, dann ist es offenbar nicht möglich. Über 2 Klassen habe ich auch schon nachgedacht. Nur wie sollte der Code dann aussehen? Denn .jpg und .png Anweisungen werden nicht intepretiert. Problematik der Seite, viele JPGBilder, die mit Rahmen versehen sein müssen und einige HinweisPNG (transparenter BG), da macht ein Rahmen drum dann wenig Sinn Falls also doch jemand nen Trick in css weiß, gerne auch Javascript, bitte gleich Code posten. Danke |
|
|||
Berichtigung
Hallo,
sorry, nun gings vor lauter Grübelei etwas durcheinander, anbei nochmal Klartext. 1 BODY BOX, in dieser zugleich JPG und PNG. JPG sollte einen Rahmen haben, die PNG sollten keinen Rahmen haben. #body (WENN PNG) { border: 0px solid #FFFFFF; margin: 5px; } #body (WENN JPG) { border: 2px solid #FFFFFF; margin: 5px; } Danke |
|
|||
Wie hubspe und Thielo schon fragten: Warum machst du es denn nicht wie folgt:
Code:
img { border: 2px solid #FFFFFF; margin: 5px; } img.hinweis { border: 0px solid #FFFFFF; margin: 5px; } HTML-Code:
<div id="body"> <img alt="Beispielbild" src="beispiel.jpg" /> <img alt="Hinweistext" class="hinweis" src="beispiel.png" /> </div> Geändert von niemand (29.09.2009 um 17:20 Uhr) |
|
|||
Hallo
und vielen Dank. Der Code img.hinweis { border: 0px solid #FFFFFF; margin: 5px;} funktioniert wunderbar und löst meine Probleme. Offenbar hatte ich den falschen Ansatz, da ich von einer Automatisierbarkeit (Arbeitserleichterung), also das jeweilige Format einfügen und es formatiert sich nach Endung selbst, ausgegangen bin. Den jeweiligen Tag nun anfügen ist auch kein Problem. Man sollte offenbar nur nicht zu faul sein. Besten Dank nochmals an alle! |
Sponsored Links |
|
||||
Auch wenn es sich erledigt hat poste ich trotzdem nochmal eine Alternativlösung in JS (natürlich würde auch ich die direkte CSS Zuweisung auf jeden Fall bevorzugen, falls möglich):
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> <style type="text/css"> #body img { border: 0; margin: 5px; } </style> <script type="text/javascript"> function image_border() { // Img-Tags ermitteln var imgs = document.getElementsByTagName('img'); // Alle Tags einzelnd durchlaufen for (var i = 0, c = imgs.length; i < c; i++) { // Url aus src-Attrbut auslesen und Dateiendung abtrennen var url = imgs[i].src; var type = url.slice(url.lastIndexOf('.') + 1, url.length); // Typ / Aktion wählen switch (type) { case 'jpg': imgs[i].style.border = '2px solid red'; break; case 'gif': imgs[i].style.border = '2px solid green'; break; case 'png': imgs[i].style.border = '2px solid yellow'; break; } } } </script> </head> <body onload="image_border()"> <!-- Nach dem Laden der Seite gehts los... --> <img src="http://xhtmlforum.de/images/x_buttons/reply.gif" alt="" /> <br /> <img src="http://xhtmlforum.de/images/x_layout/top_left_dark.jpg" alt="" /> <br /> <img src="http://xhtmlforum.de/images/x_buttons/reply.gif" alt="" /> </body> </html>
__________________
|
Sponsored Links |
Stichwörter |
attribute selector, attribute substring, css3, formatieren, getrennt nach typ, grafik, jpg, nach endung, png, rand |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zwei übereinander angeordnete Grafiken im Fließtext | Trebor | CSS | 1 | 14.01.2011 22:24 |
2 Boxen in einer, mit Rand anders als ohne Rand | fritzje | CSS | 4 | 26.10.2010 00:31 |
Grafiken auf Rand | garfield1711 | CSS | 8 | 18.06.2010 17:50 |
Rechten Rand vom P in zentriertem DIV an rechtem Rand eines IMG ausrichten | yeastie99 | CSS | 2 | 19.07.2008 16:02 |
2 Grafiken als Hintergrund ... | PiTi | CSS | 3 | 08.09.2005 00:33 |