input type image

Ker je ravno božični dan... vesel Božič vsem :)

Sedaj pa na vprašanje, ki mi že nekaj časa ne da miru in ne morem pogruntati delovanja...
namreč v inputu tipa image kako prepozna pozicijo na katerem delu slike je bil izveden klik?

to zadevo uporabljajo nekatere surf strani...

Če bi kdo vedel kaj več... ali vsaj kje naj iščem ...

9 odgovorov

image hot spot

Vesel božič tudi tebi

https://www.google.si/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=image%20hotspot%20html&oq=image%20hot%20spot&aqs=chrome.2.69i57j0l5.4199j0j1

nekaj takšnega sem že gledal ... a tukaj je samo slika, ki je sicer možno na njej uporabiti več območij in jim dodeliti različne povezave jaz bi pa to rad naredil v input tagu.

Npr:
<input type="image" src="http://www.4x4hits.com/img/surfbar/1n89yb3b48bfj8uhdg6gysii_inr76ghbg987wbv3454.gif" ondblclick="alert('You only need to click once!'); return false;" style="border: 1px solid #000000;" width="200" height="50" border="0" title="Please click the correct image to continue!">

na tej sliki so 4 slike 50x50 ... kako naj v tem primeru uporabim način z usemap, map in area da bi lahko določil pozicijo kjer se naj izvede klik

Jquery is your friend :)

https://www.sitepoint.com/10-jquery-captcha-plugins/

@Tody, hvala za tvojo hitro odzivnost in priporočila... v bistvu jaz ne rabim captche... rad bi samo način kako naj se programsko izvede klik na določeni poziciji slike... če je sploh možno.

Če izhajam iz zgornjega primera slike in recimo kliknem z miško na tistem delu slike kjer je štirikolesnik program zazna, da je bil klik izveden na zadnjem delu slike... in to bi rad naredil v javascriptu z funkcijo click()

Vrjetno na isti način kot spirits dela z CSS ko naloži samo eno sliko potem pa prikazuje samo delček le te.

Lahko npr. tudi dinamično dodaš linke, ki služijo kot "tagi" ali pa vodijo na željen(e) url naslove - primer take rešitve.

@Daz ... izgleda zanimivo ... pa ima klik na določeno področje tudi vpliv na input tag oziroma bi vplivalo na akcijo od form?
Bom pa preveril in sporočim... če je moje iskanje končano :)

Nebi smelo, linki so tam le da prekrijejo input in mu dodajo moznost razlicnih povezav ali kaj drugega.

nekaj taksnega sem imel v mislih :)... https://repl.it/Ey9E/1 ... tukaj se izvede klik na input ... sedaj še samo preverim ali bo tudi pravilno delovalo...