Comments on: Jquery image map http://www.kroativ.net/web-development/image-map/ Web Dizajn Network Thu, 09 Feb 2012 21:43:54 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: weberica http://www.kroativ.net/web-development/image-map/comment-page-1/#comment-1074 weberica Fri, 17 Jul 2009 11:43:03 +0000 http://www.kroativ.net/?p=4260#comment-1074 eto, sad imamo dvije verzije, ako netko ima treću neka javi :) eto, sad imamo dvije verzije, ako netko ima treću neka javi :)

]]> By: faax http://www.kroativ.net/web-development/image-map/comment-page-1/#comment-1073 faax Fri, 17 Jul 2009 11:06:14 +0000 http://www.kroativ.net/?p=4260#comment-1073 HTML (posto se gore ne vidi): <div class="mapa"> <img src="maca-ptica.jpg" width="500" height="333" alt="" /> <a href="#" class="lovina"><span>Lovina</span></a> <a href="#" class="lovac"><span>Lovac</span></a> </div> HTML (posto se gore ne vidi):

<div class="mapa"> <img src="maca-ptica.jpg" width="500" height="333" alt="" /> <a href="#" class="lovina"><span>Lovina</span></a> <a href="#" class="lovac"><span>Lovac</span></a> </div>

]]> By: faax http://www.kroativ.net/web-development/image-map/comment-page-1/#comment-1072 faax Fri, 17 Jul 2009 11:04:34 +0000 http://www.kroativ.net/?p=4260#comment-1072 ev na brzaka neka varijanta, s tim da se to moze ushminkat al ja nisam imao vremena :) HTML: <a href="#" rel="nofollow">Lovina</a> <a href="#" rel="nofollow">Lovac</a> CSS: .mapa { width: 500px; height: 333px; position: relative; } .mapa a { display: block; padding: 5px 10px; position: absolute; z-index: 999; background-color: #000; } .mapa span { display: none; } .mapa :hover span { display: block; } a.lovac { top: 32px; left: 132px; } a.lovina { top: 192px; left: 293px; } Uz jQuery (zadnja verzija): $(".mapa a").mouseenter( function () { $(this).fadeIn("slow"); }); $(".mapa a").mouseleave( function () { $(this).fadeOut("slow"); }); ev na brzaka neka varijanta, s tim da se to moze ushminkat al ja nisam imao vremena :)

HTML:

Lovina
Lovac

CSS:
.mapa { width: 500px; height: 333px; position: relative; }
.mapa a { display: block; padding: 5px 10px; position: absolute; z-index: 999; background-color: #000; }
.mapa span { display: none; }
.mapa :hover span { display: block; }
a.lovac { top: 32px; left: 132px; }
a.lovina { top: 192px; left: 293px; }

Uz jQuery (zadnja verzija):
$(“.mapa a”).mouseenter( function () {
$(this).fadeIn(“slow”); });
$(“.mapa a”).mouseleave( function () {
$(this).fadeOut(“slow”); });

]]> By: weberica http://www.kroativ.net/web-development/image-map/comment-page-1/#comment-1070 weberica Thu, 16 Jul 2009 21:22:23 +0000 http://www.kroativ.net/?p=4260#comment-1070 a mogao si i napisati kako... kad si već tu :) a mogao si i napisati kako… kad si već tu :)

]]> By: faax http://www.kroativ.net/web-development/image-map/comment-page-1/#comment-1069 faax Thu, 16 Jul 2009 19:22:22 +0000 http://www.kroativ.net/?p=4260#comment-1069 moglo se i css-om ovo rijesit... jednostavnije :D moglo se i css-om ovo rijesit… jednostavnije :D

]]>