Do it yourself: CSS für Profil und Blog

@yaacool
Irgendeinen Link.
Als hover Effekt einen Ton.

lach oh sorry, ja genau irgendein Link als hover einen ton, ciela hats erraten.

@Ciela

Das ist nicht egal
Wenn man das über den Hovereffekt machen will müssen die Elemente ineinander verschachtelt sein
Das geht wenn man einen eigenen Link einbindet wie

< a href="irgendeinlink" id="irgendeinlink">
< embed src="irgendeinsound" id="irgendeinsound">
< /a>

und dann sagt
#irgendeinsound {display: none;} /*das teil ist nicht da also kein sound */
#irgendeinlink:hover #irgendeinsound {display: block; visibility: hidden;}

dann würde das soundelement bei hover auf #irgendeinlink erscheinen und der sound würde abgespielt werden

anders ist es bei schon vorhandenen links, weil man da nicht frei verschachteln kann
da könnte man das höchstens evtl über das :after machen
und selbst da bin ich mir nicht sicher ob das wirklich so geht

@yaacool
Das wusste ich nicht. Ich hab nur wiedergegeben, was @du_selbst geschrieben hatte.

Ich weiß jetzt immer noch nicht welcher Link
Ein neuer oder einer, der schon da ist, oder alle.... ?

@du_selbst
@Ciela
@yaacool
Hier könnte @__defSig evtl. helfen?!

Also eigentlich alle @yaacool

Hi,
@der-Ferengi
kann ich ehrlich gesagt nicht.
<a data-inject="base64string" class="sound stream link">guess this doesn't work a[class*=sound.stream.link]:hover:after{content:data:audio/mp3;base64, base64encodedmp3}

attr(data-inject) gibt den Value des attr zurück, kann z.B. ein ein base64 string sein.

a[class^=sound.stream.link]:hover:after{content:data:audio/mp3;base64,attr(data-inject)}

http://www-archive.mozilla.org/quality/networking/testing/datatests.html
http://stackoverflow.com/questions/9244197/css-content-attr-and-url-in-the-same-sentence

Alle Angaben ohne Gewähr und unverifiziert.

Hey @du_selbst
__defSig hat evtl. eine Lösung für Dich über diesen Beitrag.

Danke @der-Ferengi und @__defSig nur blick ich da leider nicht ganz durch. Ich muss passen.


Ach so jetzt seh ich erst ...

a:hover:after{content:data:audio/mp3;base64,attr(data-inject)}

Das macht ja irgendwie noch sinn, obwohl ich davon nur die Hälfte verstehe ^^

@du_selbst
Ich kann Dir da leider auch nicht weiterhelfen. Habe mir
erst hier auf allmy ein bißchen html für mein Profil bei-
gebracht. Sorry.

HTML5 dataset:
.linkmimiciframe:hover .linkmimiciframe.dataset.src = 'XYZ'
Obs funktioniert weiß ich nicht.
http://html5demos.com/dataset

HTML5 data- Attribut
http://www.drweb.de/magazin/css-und-data-dashes/

Attribut Selektor
http://www.mediaevent.de/css/css-selektor-attributselektor.html

Selektoren
http://www.w3.org/TR/CSS2/selector.html

content:
http://css-tricks.com/css-content/

data-url:
Wikipedia: Data-URL#CSS
http://www-archive.mozilla.org/quality/networking/testing/datatests.html

base64
Wikipedia: Base64

mp3 to base64 converter
http://www.bing.com/search?q=mp3+to+base64+converter&qs=n&form=QBRE&pq=mp3+to+base64+converter&sc=0-0&sp=-1&sk=

nested css attr()
stackoverflow.com/questions/9244197/css-content-attr-and-url-in-the-same-sentence#answer-9244712

Attribute:
http://de.html.net/tutorials/html/lesson7.php

Main:
http://www.w3schools.com/html/default.asp

Hier einfach random Links reinzuposten hilft niemandem weiter.
Fakt ist: die schon vorhandenen Links können nicht erweitert werden
Damit gibt es kein
< a data-inject="base64string" class="sound enabled link">< /a>
und damit kannst du alles was sich darauf bezieht vergessen

Das sind keine random-links. Das sind Erklärungen zu den Bestandteilen obigen Codebeispiels.

yaacool schrieb:Damit gibt es kein
< a data-inject="base64string" class="sound enabled link">< /a>
und damit kannst du alles was sich darauf bezieht vergessen

Deshalb bitte obiges Beispiel betrachten und die Links für die Erklärung.

Es ist eine Mischung aus data-urls, after:, attr(), und content:

Dass hättest Du erkennen müssen.

__defSig schrieb: .linkmimiciframe.dataset.src = 'XYZ'

Das hier allerdings geht nicht und war unüberlegt da dataset nur auf data- anwendbar ist.

Die arbeiten da mit Javascript, was in den Profilen auch nicht geht.

Data-Urls werden entfernt. Wie ist es hiermit:

<a data-a="data" data-b="audio/mp3 data-c=";base64," data-d="base64encodedmp3">X a:hover:after { content:attr(data-a) attr(data-b) attr(data-c) attr(data-d); }

Der Parser von Allmy wird in Zukunft sowieso viel zu tun haben.

Probiers doch aus :troll:

Mein Strafregister lässt es leider nicht zu.:)