Ta vekk gul boks

Mini
Minis bilde
Avlogget
Ble med: 06.05.2011

Hei!

Jeg skulle gjerne hatt vekk den gule boksen når man holder over bilder, er det mulig?(Fotballnytt.no)

 

 

Mini

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Ta vekk gul boks

Hei og velkommen smil

Nei, dette er dessverre ikke mulig, fordi den gule boksen (som for øvrig heter tool tip) styres på klientmaskinen. Det vil si maskinen til den personen som kommer inn på websiden din. Tool tip kommer som oftest fra title-attributten eller alt-attributten på bildet, så man kan unnlate å ha med disse for å ikke få opp tool tip.

Dette anbefales imidlertid IKKE, fordi alt og title-attributter hjelper søkemotoren å forstå hva som er på bildet.

Mitt råd er at du ikke henger deg opp i denne lille detaljen. smil

 

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Ta vekk gul boks

Jeg var 99% sikker på at det måtte være mulig å unngå at denne lille irriterende saken ble vist siden det er mulig å manipulere den (style den/bytte den ut). Siden dette er mulig burde det også la seg gjøre å gjemme den helt.

Men sånn uten videre er det sant som Hjemmeside sier; "Nei, dette er dessverre ikke mulig". Det er ikke mulig uten javascript that is. Og den enkleste løsningen er å benytte seg av jQuery. De har riktignok ikke en ferdig funksjon til dette, men etter litt reasearch så er det ikke den felt store operasjonen. Og løsningen er meget selvsagt:

  1. $(function(){
  2. var originalTitle = $('img').attr("title");
  3. $('img').hover(function() {
  4. $(this).attr("title","");
  5. },
  6. function() {
  7. $(this).attr("title",originalTitle);
  8. });
  9. });

Det vi i praksis gjør her er først å finne attributten og setter den i en variabel: orginalTitle

  1. var originalTitle = $('img').attr("title");

Videre leter vi etter alle <img>-tagsa og sier at; Hver gang brukeren beveger markøren over dette bilde...

  1. $('img').hover()

... så sette vi title attributten til "" (tom/ingenting).

  1. $(this).attr("title","");

Når brukeren beveger markøren vekk fra bildet, så setter vi orginalTitle tilbake i title attributten:

  1. $(this).attr("title",originalTitle);

Og det er alt. Nå er jeg 100% sikker på at dette er fullt mulig og du kan se en live versjon her: http://dev.thomaskile.me/?page=test-zone&module=Maxibaw

Høyreklikk for å se at jeg har både alt="er satt" og title="er også satt", men at ingen gul boks vises når du holder markøren over. (håper jeg).

Om du har FireBugs kan du åpne dette, velge HTML i fanen og finne et av bildene. Der kan du se at title attributten tømmes når du beveger markøren over, og at den settes tilbake til orginalverdien når du forlater bildet igjen...

NOTE! Denne løsningen svekker hverken søkemotorer eller screen-readers da title attributten orginalt er tilgjenglig. Alt vi gjør er å manipulere den i etterkant og lar de brukerene som har js aktivert slippe å se denne om dette er ønskelig fra din side...

  1.  

med hilsen
Thomas Kile

Mini
Minis bilde
Avlogget
Ble med: 06.05.2011
Ta vekk gul boks

Hei!

 

Det ser ut til å fungere perfekt med siden din, men hvordan og hvor er det mest praktisk å plassere denne?

 

Mini

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Ta vekk gul boks

Koden er forsåvidt komplett. Bare kopier/lim inn et passende sted på ditt nettsted.

Dette er jQuery, så den må komme etter du har lastet inn jQuery biblioteket...

med hilsen
Thomas Kile

Mini
Minis bilde
Avlogget
Ble med: 06.05.2011
Ta vekk gul boks

Jeg har ikke så mye peiling på jQuery, hvordan legges det inn? Bare kopier og lim inn på ett eller annet sted?

 

Mini

ThomasK
ThomasKs bilde
Avlogget
Donator
Ble med: 30.12.2009
Ta vekk gul boks
Her har du et eksempel på et HTML5 oppsett med denne funksjonen lagt til:
  1. <!DOCTYPE html>
  2. <html lang="no">
  3. <head>
  4. <meta charset="utf-8">
  5.  
  6. <link rel="dns-prefetch" href="//ajax.googleapis.com" />
  7.  
  8. <title> </title>
  9. <meta name="description" content=" ">
  10. <meta name="Keywords" content=" ">
  11.  
  12. <link rel="stylesheet" href="stylesheet.css">
  13.  
  14. </head>
  15. <body>
  16.  
  17. <!-- ditt side innhold -->
  18.  
  19. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  20. <!-- funksjonen legges til etter at jQuery biblioteket er lastet inn og klar til bruk -->
  21. <script>
  22. $(function(){
  23. var originalTitle = $('img').attr("title");
  24. $('img').hover(function() {
  25. $(this).attr("title","");
  26. },
  27. function() {
  28. $(this).attr("title",originalTitle);
  29. });
  30. });
  31. </script>
  32. </body>
  33. </html>

Et par notater:

Vi laster inn jQuery biblioteket fra Google's CDN, og av den grunn kjører vi en dns-prefetch helt i begynnelsen for å klargjøre den eksterne tilkoblingen så jQuery biblioteket kan lastes inn kjappest mulig.

Vi plasserer all javascript nederst i dokumentet slik at siden lastes ned fortest mulig til brukeren.

OBS! Du bør flytte selve funksjonen/koden inn i en egen .js-fil for å ungå inline script. Samme "regel" gjelder for all css-styling også.

Les mer om jQuery her : http://jquery.com

Her kan du lese mer om å laste jQuery fra Google : https://developers.google.com/speed/libraries/

BTW: url'en jeg angav tidligere har endret seg, her er den nye : http://dev.thomaskile.me/?page=test-zone&module=MaxibawGallery

 

EDIT: Lurer på om det kan være en liten bug i koden (har vel vert litt kjapp i vendinga). "originalTitle" låses muligens til den første orginale tittelen som blir satt ved hover-eventen, og oppdaterer seg ikke i etterkant. Har ikke noe å si for søkemotorer, men kan ha en innvirking på screen-readers eller andre hjelpemidler.

Får se nærmere på dette i mårra. Nå er det kvelden her...

med hilsen
Thomas Kile

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.