اشکال دایره ای به صورت لینک و افکت hover

[bftarane]

سلام.
من با کدهای زیر چهار تا دایره رو به صورت لینک در آورده بودم

<div id="circle1"><a href="#"><img src="Images/circle1.png" /></a></div>
<div id="circle2"><a href="#"><img src="Images/circle2.png" /></a></div>
<div id="circle3"><a href="#"><img src="Images/circle3.png" /></a></div>
<div id="circle4"><a href="#"><img src="Images/circle4.png" /></a></div>
منتها چون قرار شده یه افکت hover هم داشته باشن این لینکها مثلاً عکسها کمرنگتر بشن با hover حالا نمی دونم چطور اینکار رو انجام بدم.
لطفاً راهنمایی کنید.

این کد جواب نداد

#circle1 img:hover
{
background-image:url("Images/circle1hover.png");



}

یه راه دیگه هم امتحان کردم اومدم img ها رو برداشتم از داخل تگهای a و به a بک گراند ایمیج دادم اون مشکلش این بود که من می خوام کابر فقط داخل دایره که موس رو می بره موس به شکل دست باشه ولی این طوری یه مربع رو در نظر می گیره به عنوان لینک چون مجبور شدم به a عرض و ارتفاع و Display:block بدم وگرنه دیده نمی شد عکس.

لطفاً راهنمایی کنید.

[mnvoh90]

واسه مشکل اول از ویژگی opacity استفاده کنید.
واسه مشکل دوم از map استفاده کنید.

[r4hgozar]

سلام
http://www.w3schools.com/cssref/css3_pr_opacity.asp
http://www.w3schools.com/css/css_image_transparency.asp

[bftarane]

واسه مشکل دوم از map استفاده کنید.
لطفاً برای استفاده از map مثال بزنید؟

[mnvoh90]

این سایت رو باز کنید (http://kpaste.ir). اون پایین یه نوار آبی هست که نوشته Beta. با وجود اینکه قاعدتا اون یه عکس مربعی هست فقط رو نوار قابل کلیک شدن هست. برای این کار از تگ map استفاده میشه و اون نوار با استفاده از این کد درست شده (http://kpaste.ir/fa/ViewPaste/view/80). حالا تو این یه مورد از شکل چندضلعی استفاده شده ولی تو مورد شما باید از دایره استفاده بشه. اینم اطلاعات بیشتر (http://www.w3schools.com/tags/tag_map.asp)

[r4hgozar]

لطفاً برای استفاده از map مثال بزنید؟


http://www.w3schools.com/tags/tag_map.asp
http://www.w3schools.com/tags/att_img_usemap.asp