Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS3: Experimenteren met interne & externe links

Stefan Nagtegaal
5 antwoorden
  • [b:def202044c]Even vooraf..[/b:def202044c]
    Mijn website voldoet volledig aan de normen, waarden en wetten van XHTML 1.0 Strict en daar ben ik best een beetje trots op.

    Waar ik echter minder trots op ben, is dat ik JavaScript gebruik voor het laten openen van externe links. Dit moet helaas omdat in XHTML Strict het target="_blank"-attribuut van de a-tags niet meer mogen worden gebruikt.

    De javascript die ik gebruik speurt het document af op de rel="externe-link" binnen de a-tag waarna de hyperlink wordt geopend in een nieuw venster.

    [b:def202044c]Wat nu?[/b:def202044c]
    Ik heb een beetje gespeurd op internet in samenwerking met mijn grote vriend google en ben aan wat CSS3 gekomen om mijn huidige javascript te kunnen ondervangen dmv CSS.

    Dus met behulp van onderstaande code wordt er een icoontje achter de link geplaatst, die mijn bezoekers laat weten of de gebruikte link intern of extern is.

    De code:
    [code:1:def202044c]
    /** <a href="mailto:Email@Adres.nl">Naam</a>*/
    a[href^="mailto:"] {
    background: transparent url('/images/aemail.gif') 100% 50% no-repeat;
    padding-right: 10px;
    }

    /** <a href="http://www.computertotaal.nl" title="Bezoek de website van Computer Totaal!">Computer Totaal Website</a>*/
    a[href^="http:"] {
    background: transparent url('/images/aoutside.gif') 100% 50% no-repeat;
    padding-right: 10px;
    }

    a[href^="http://mijn-domein.nl"],
    a[href^="http://www.mijn-domein.nl"] {
    background: inherit;
    padding-right: 0;
    }
    [/code:1:def202044c]

    Dit werkt echt GE-WEL-DIG!!! Echt waanzinnig!!!



    helaas, tot ik het in IE 5.x en IE 6 wilde testen.. Er was niets te zien.. Het probleem is dat IE nogsteeds geen goede ondersteuning bied voor CSS-1 en CSS-2, dus laat staan dat het overweg kan met CSS-3..

    Nu is mijn vraag of iemand hier een andere remedie op weet…
    Hoe kan ik zoiets wel laten werken op mijn site? Via reguliere expressie's in PHP?? Of een JavaScript??


    Ik hoop dat iemand me kan/wil helpen… :D
  • http://dean.edwards.name/IE7/
  • Wat bedoel je Annie?

    Wat ik zie is een website van één of andere goochelaar die aan versie IE 7 aan het sleutelen is..

    Ik bedoelde meer te vragen of er nog andere manieren zijn om zoiets tot stand te laten komen??
  • Anne*

    Bekijk de website is wat beter zou ik zeggen in plaats van gelijk denken dat ik je vraag niet begrepen heb.
  • Je zou met behaviors of css expressions kunnen werken. Dit is beide IE-only.

    Expression voorbeeld:
    [code:1:f96db46abf]
    a{
    background: expression(this.href.indexOf('http:')==0?'transparent url(/images/aoutside.gif) 100% 50% no-repeat':'inherit');
    }
    [/code:1:f96db46abf]
    Waarschijnlijk werkt dit niet, want ik heb het niet getest :D

    Als je meerdere properties wil aanpassen is het misschien beter om behaviors te gebruiken.
    Eigenlijk zuigen css expressions nogal (omdat ze nogal een performance hit kunnen veroorzaken).

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.