Tekst op image minderscherp bij downscaling (IE)

[Dennis013]

Ik heb een probleem met een website en het gaat om weergave daarvan in internet explorer.
Voor een navigatiegedeelte gebruik ik buttons welke bestaan uit een image, met daarop wat tekst.

Om deze buttons bij inzoomen scherp te houden, gebruik ik veel grotere afbeeldingen dan dat de buttons daadwerkelijk op het scherm zijn

Dit werkt prima in Chrome, maar in internet explorer werkt dit niet goed. Ja, ze zijn scherp bij inzoomen, maar wanneer de button verkleind op weergegeven wordt, is de tekst minder scherp. Rafelig zou ik het noemen.
Ik maak al gebruik van de css ms-interpolation-mode, maar dat heeft schijnbaar weinig effect.

Wie heeft er voor mijn een tip in deze ? Ik kan er geen echte tekst overheen leggen omdat dat niet goed gaat met de onmouseover rollover van de afbeelding

[RobIII]

Dennis013 schreef op dinsdag 13 oktober 2015 @ 15:28:
Ik kan er geen echte tekst overheen leggen omdat dat niet goed gaat met de onmouseover rollover van de afbeelding

Dan lijkt me dat het probleem dat je moet zien op te lossen, niet proberen de pleister te fixen Sowieso is tekst in een image niet heel erg handig voor zoekmachines e.d.

Je zou eens SVG kunnen overwegen mits je IE9+ kunt 'eisen' (maar zie ook note 2 op die pagina)...

[ Voor 18% gewijzigd door RobIII op 13-10-2015 15:31 ]

[Dennis013]

Ja svg, dat was ook al eens door mijn hoofd geschoten, maar geen ervaring mee. Photoshop ondersteund het niet standaard toch?

En voor wat die rollover betreft. De achtergrond moet infaden bij een mouseover, dus daar zit de mouseover aanvast, maar zodra je met de muis over de div met de tekst gaat,ga je feitelijk van de achtergonddiv af en kort daarna er weer op. Dus activeer je die mouseover nog eens.

Voor zover ik hebben kunnen zien online is daar niet echt een oplossing voor. Iedereen zie ik het met images doen

[RobIII]

Dennis013 schreef op dinsdag 13 oktober 2015 @ 15:35:
Voor zover ik hebben kunnen zien online is daar niet echt een oplossing voor. Iedereen zie ik het met images doen

Zoek je nog met Altavista ofzo?

Hit 1 bij [google=mouseover+fade+image]. Er is méér dan zat te vinden naast die eerste hit. De "techniek" die je nu gebruikt was leuk in 1870 ofzo.

[ Voor 12% gewijzigd door RobIII op 13-10-2015 15:52 ]

[Dennis013]

Rob, je moet misschien even lezen wat ik in de mail al vermelde. Ik heb hier al heel wat tijd in gestoken. Ik werk al wel sinds de tijd van altavista als webdesigner. Maar ik wil niet pretenderen alles te weten, vandaar mijn vraag hier.

Ook al als je de techniek gebruikt uit de eerste hit... Dan ligt nog een div met de tekst erover. Met een hogere z-index, zodat je deze ziet. En zodra je dan over de tekst op/af hovert dan triggert die rollover weer. Terwijl je nog binnen de vorm van de button zit.

code:

<div id="cf"><div id="tekst"> DIT IS TEKST</div>
    <img class="bottom" src="images/button/advies-roll.png" /><img class="top" src="images/button/advies.png" /></div>
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

#tekst {
    position: absolute;
    left: 225px;
    top: 37px;
    font-weight: bold;
    font-size: 28px;
    z-index: 99;
 }

[ Voor 77% gewijzigd door Dennis013 op 13-10-2015 16:25 ]

[killercow]

Volgens mij kun je beter stellen dat je aanrommelt als webdesigner, geen probleem, maar lees dan ook wat anderen je als tips aanbieden.

Je kunt *prima* een knop maken met text, en daar een rollover op gebruiken.

Wat dacht je er van om de afbeelding via css als background in te laden, gezien het geen content is maar opsmuk.

Faden is niet meer dan dat, opsmuk, en dat botst nu met je daadwerkelijke functionaliteit. Functionaliteit eerst, en dan pas sugar toevoegen levert je ook paden op tot nuttige degradation waardoor je eventueel slecht werkende browsers kunt negeren en deze kunt behoeden voor deze niet werkende opsmuk.

De text is dan heerlijk scherp op elk zoomniveau, en de achtergrond is precies dat, ene achtergrond. Daarbij zou het ook ontzettend goed kunnen dat je de hele plaatjes achterwege kunt laten als je gewoon moderne technieken gebruiken, denk aan css gradients, borders etc. Of mischien juist media-queries om je verschillende rendering-breakpoints te herkennen.

zoals Rob al aangeeft, je gebruikt technieken uit het jaar Kruik, en zijn veel betere, zinnigere en vooral handigere oplossingen.

[ Voor 15% gewijzigd door killercow op 13-10-2015 16:31 . Reden: typos + uitleg ]

[Dennis013]

Volgens mij rommelen we uiteindelijk allemaal maar wat aan... Weet jij alles uit je hoofd?

Ik heb serieus ook geprobeerd om de achtergrond te laten faden van een div, maar dat 'flitste' te veel in internet explorer.

Toon mij de link waar het wel kan
Een soepele crossbrower fade in van de achtergrond met echte tekst erover heen
Ik kan het niet vinden?

[ Voor 26% gewijzigd door Dennis013 op 13-10-2015 16:39 ]

[Caelorum]

Dennis013 schreef op dinsdag 13 oktober 2015 @ 16:32:
[...] Ik heb serieus ook geprobeerd om de achtergrond te laten faden van een div, maar dat 'flitste' te veel in internet explorer.

Toon mij de link waar het wel kan
Een soepele crossbrower fade in van de achtergrond met echte tekst erover heen
Ik kan het niet vinden?

Werkt prima bij mij in IE11: https://jsfiddle.net/na95akbj/3/ (dit is overigens met gebruik van de techniek op de pagina die RobII linkt)
Kan het niet voor je testen in oudere IE's, maar grote kans dat het daar ook nog wel werkt. Het werkt in ieder geval prima in IE11, Firefox, Chrome en Edge.

*edit* je hebt overigens nog niet aangegeven welke browsers je wilt supporten en hoe je het er uiteindelijk uit wilt laten zien. Je beschrijving daarvan is in ieder geval niet echt duidelijk.

[ Voor 17% gewijzigd door Caelorum op 13-10-2015 19:32 ]