» »

javascript, greasemonkey: kako najti element in zamenjati sliko/link v htmlju

javascript, greasemonkey: kako najti element in zamenjati sliko/link v htmlju

Vapo1 ::

v osnovi kaj bi rad:
da greasemonkey iz diska prebere txt file v katerem so linki in potem ko se nalozi site pogleda ce je kaksen izmed linkov na siteu tudi v txtju in mi nekako oznaci ta link
to bi rad da naredi tako da zraven lina doda sliko (recimo sliko kljukice ki ponazarja da je ta link ze v txtju)
ali pa ce link ze ima v htmlju svojo sliko - da spremeni to sliko



zaenkrat mi tole deluje:

var allImgs,thisImg;
allImgs = document.evaluate('//img[@src]',
  document,
  null,
  XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
  null);


for (var i=0;i<allImgs.snapshotLength;i++) {
 var thisImg = allImgs.snapshotItem(i);
 var src = thisImg.src;
	var srcMatch = src.match('^http://static.slo-tech.com/39746.jpg');
	
	if (srcMatch != null) {
	//alert("got match");
  thisImg.src = 'http://www.google.si/images/nav_logo7.png';
	}




ta koda zamenja prvo sliko trenutno na slotech siteu (neka faca nekoga) z sliko google logota

ok... torej rata mi najti slike in jih potem modificirat ('//img[@src]') .. nevem pa kako vstaviti novo sliko zraven texta oz linka...

problem je tudi recimo kako takle nink shendlat:
<a href="/clanki/09010/" title="All your firmware are belong to us"><img width="60" height="60" src="http://static.slo-tech.com/39746.jpg" alt="All your firmware are belong to us" /></a>

//kako poiskati po "href" in potem zamenjati "img src" .... po href ze znam poiskati vse elementa "a" ('//a[@href]') ... ampak potem kako dobiti pripadajoci element "img src" (drugace same elemente img znam poiskati - koda na vrhu posta)


nov sem v tem... hvala

nimbix ::

Link poiščeš na podoben način, kot iščeš že zdaj slike, z '//a'. Potem pa narediš nekaj takega (ni testirano):
var slika = document.createElement('img');
slika.src = "http://blablabla";

if (link.nextSibling) {
  link.parentNode.insertBefore(slika, link.nextSibling);
} else {
  link.parentNode.appendChild(slika);
}


Metoda insertAfter ne obstaja, tako da moraš zaradi tega malo kombinirati insertBefore / appendChild.
Zgornji primer ti doda sliko takoj za linkom, torej na sliki ne bo več linka. Če želiš link tudi na sliki, potem celotni if/else zamenjaš z link.appendChild(slika).

Vapo1 ::

ok.... uspelo mi je..


var divi = document.getElementsByTagName("div")[0];
var aji = divi.getElementsByTagName("a");
for (a in aji) {
				if(aji[a].href == "http://blabla.com"){
					aji[a].firstChild.src = "http://www.google.si/images/nav_logo7.png";
					//alert("done");
				}




torej vidim da obstaja cel kup funkcij ...
getElementsByTagName
parentNode
insertBefore
appendChild
firstChild


etc etc..

hvala nimbix.... vprasal pa bi se kako preberem text file iz diska (na vrhu v prvem postu sem napisal zakaj to rabim) ?

zdaj pa se to ... jaz sem pac instaliral greasemonkey in zdaj v text editorju neki napamet pisem kodo in probavam na slepo.... malo po internetu tu in tam dobim kaksno uporabno funkcijo (kot se je tu zgodilo) in se sreca da je javascript podoben c# kjer sem domac...
uglavnem zanima me kje dobim spisek vseh teh funkcij ... in kaksno orodje naj si dljam na priatebay da lahko normalno programiram in debugam javascript.... c# programiram v VS 2008

hvala

nimbix ::

1. Direktno nalaganje z diska v greasemonkeyu kolikor vem ni mogoče. Lahko pa normalno nalagaš datoteke iz lokalnega web strežnika. Narediš npr. da je datoteka s podatki dostopna na naslovu http://localhost/scripta.js in jo naložiš iz greasemonkey scripte. Jaz nalagam cele scripte kar z:

var script = document.createElement('script'); 
script.src = 'http://localhost/scripta.js';
script.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script);


Scripte, dokumentacijo in primere za greasemonkey najdeš na http://www.greasespot.net/

2. createElement/insertbefore/itd so del DOM API-ja. Več najdeš na https://developer.mozilla.org/en/Gecko_...

3. Pozabi piratebay. Večina nas za pisanje javascripta uporablja brezplačne editorje (notepad++, jedit, ...) za debugiranje pa firebug: http://getfirebug.com/

Gandalfar ::

aptana, ce res hoces :)


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč
8711344 (10082) lisjak
»

JavaScript offsetTop in brskalniki

Oddelek: Izdelava spletišč
81001 (933) shorvat
»

Mreža - en PC se ne poveže prek routerja

Oddelek: Omrežja in internet
71167 (1167) blackclaw
»

Kako se tole naredi?

Oddelek: Izdelava spletišč
261508 (1208) njok
»

vkljucevanje TXT datoteke v html

Oddelek: Programiranje
5849 (799) darh

Več podobnih tem