Hente info fra browser / html fil?

Java eller JavaScript?

I java. Det skal være et eksternt program der kører uafhængigt af browseren, men når man så har musen inde i browseren og trykker på et billede, så skal der vises en lille boks nede i hjørnet med billedets navn. f.eks. smiley.jpg

Hvis det ikke behøver at være et Java-program, kan du skrive følgende JavaScript i adresselinjen på browseren. Billedets navn vil derefter kunne vises i en div med id "imgname".

java script:var oNew=document.createElement('div');oNew.setAttribute('id','imgname');oNew.appendChild(document.createTextNode(' '));document.getElementsByTagName('body')[0].appendChild(oNew);for(var i=0,im=document.getElementsByTagName('img');i<im.length;i++){im[i].onmouseover=new Function("document.getElementById('imgname').firstChild.nodeValue='"+im[i].getAttribute('src')+"'")}void(0)

Jeg kan ikke få det til at virke.

Skal jeg gå ind på siden først og skrive det?

f.eks.

1. gå ind på www.google.dk
2. skriv i samme felt

java script:var oNew=document.createElement('div');oNew.setAttribute('id','imgname');oNew.appendChild(document.createTextNode(' '));document.getElementsByTagName('body')[0].appendChild(oNew);for(var i=0,im=document.getElementsByTagName('img');i<im.length;i++){im[i].onmouseover=new Function("document.getElementById('imgname').firstChild.nodeValue='"+im[i].getAttribute('src')+"'")}void(0)

3. imgname kommer frem i en div


Ps. Og forresten synes jeg det er en genial måde at gøre det på, så kan jeg bare indsætte det lille script på alle sider også kommer der en lille div boks under hvert billede med navnet?

Du må meget gerne skrive hvordan du får det til at virke, så er pointne dine.

Nej, det har ikke meget med Google at gøre. ;)

Men åbn en tilfældig side, som har billeder. F.eks. denne side, vi skriver på nu!

Gå op i adresselinjen (der hvor der står http://www.eksperten...) og indsæt:

java script:var oNew=document.createElement('div');oNew.setAttribute('id','imgname');oNew.style.position='absolute';oNew.appendChild(document.createTextNode(' '));document.getElementsByTagName('body')[0].appendChild(oNew);for(var i=0,im=document.getElementsByTagName('img');i<im.length;i++){im[i].onmouseover=new Function("document.getElementById('imgname').firstChild.nodeValue='"+im[i].getAttribute('src')+"';document.getElementById('imgname').style.top='"+im[i].offsetTop+"px'"document.getElementById('imgname').style.left='"+im[i].offsetLeft+"px'");im[i].onmouseout=new Function("document.getElementById('imgname').firstChild.nodeValue=''");}void(0)

(Beklager at den indsatte et mellemrum mellem java og script før.)

Tryk på enter-tasten.

Når du derefter holder musen over et billede på siden vil du kunne se navnet på billedet nederst på siden.

For at rykke div-boksen op i toppen af siden kan du bare bruge følgende CSS:

#imgname{
  z-index:1;
  position:absolute;
  top:0;
  background-color:#fff;
}

Jeg har i øvrigt skrevet JavaScript-koden om, så den skjuler navnet igen, når du flytter musen fra billedet!

Hov, der var vist et par fejl i.

Jeg har nu forenklet den en hel del, så billede-adressen bare bliver vist som et tooltip:

java script:for(var i=0,im=document.getElementsByTagName('img');i<im.length;i++){im[i].title=im[i].getAttribute('src');}void(0)

Du skal derfor ikke bruge noget CSS til den!

Nu har jeg prøvet her på denne side at indsætte:

java script:for(var i=0,im=document.getElementsByTagName('img');i<im.length;i++){im[i].title=im[i].getAttribute('src');}void(0)

og trykke enter.
Og kan nu se at når jeg holde musen henover dit profil billede så kommer der en lille tooltip der skriver /avatar?980 men når jeg prøver at gemme billedet vha. gem som er det et andet filnavn jeg får. her er det 77990_w13__jpg hvilket virker mere rigtigt.

Men stresser jeg egentligt ikke ekspertens server hvis jeg hvergang skal tilføje noget javascript for at vise det på min måde? eller kører det udelukkende på klient siden?

Nej, JavaScript kører kun hos klienten.

Og ja, jeg kan selvfølgelig godt se, at det kan være et problem at den ikke viser den rigtige adresse, men det er fordi "/avatar?980" er en PHP-side, som viser det korrekte billede. Så lige i dette tilfælde kan du ikke få vist den helt rigtige adresse med JavaScript, men normalt vil det være den korrekte billede-sti.

Ikke at den er decideret forkert, for hvis du går ind på www.eksperten.dk/avatar?980, så bliver det korrekte billede vist, men det er selvfølgelig ikke filens helt korrekte navn heller..

:)

Lukketid? :)