ایجاد لینک روی قسمتی از تصویر

ایجاد لینک روی قسمتی از تصویر به درخواست کاربر عزیزمون اقا مهران این کد رو درست کردم ابتدا ی توضیح کوچیک درباره کد میدم و بد نحوه استایل دهی به ان

خب کدی که در ادامه مطلب قرار دادم کدی است که شما میتوانید به قسمت دلخواه روی عکس لینک ایجاد کنید مثلا گوشه سمت چپ عکس لینک دار باشه.

لینک دار کردن قسمت هایی از یک تصویر (تگ های map و area) صورت میگیره و استایل این نوع تگ ها جایی دیده نمیشه  اما من امروز براتون دو استایل برای این کدها اماده کردم که با رفتن ماوس روی قسمت لینک دار شده رنگ ان تغییر کرده و یا کادر دور ان ایجاد شده

امیدوارم از این کد خوشتون بیاد…

 

 

ایجاد لینک روی قسمتی از تصویر
برای دیدن عکس به صورت متحرک روی ان کلیک کنید

برای مثال شما می توانید به لینک زیر بروید. در لینک زیر شما تصویری کوچک از منظومه شمسی را می بینید که با کلیک کردن روی هر سیاره یا … به صفحه دیگری می روید.

دمو کد

کد شماره ۱

<!DOCTYPE html>
<html>
<head>

<style>
img{
     border:1px solid 
}
canvas{
    pointer-events: none;   
    position: absolute;
}
</style>

<title>کدبازان- لینک دادن به قسمتی از عکس</title>
</head>
<body onload='myInit()'>
    <canvas id='myCanvas'></canvas>   

<center>
<!---ادرس عکس شما در این قسمت----->
<img src='https://www.codebazan.ir/test.png' usemap='#imgmap_css_container_codebazanmap2' class='imgmap_css_container' title='کدبازان' alt='codebazanmap2' id='img-codebazanmap2' />
<map id='codebazanmap2' name='imgmap_css_container_codebazanmap2'>

   <!----ادرس لینک شما در این قسمت---->
    <area shape="rect" onmouseover='myHover(this);' onmouseout='myLeave();' coords="10,40,100,120" href="https://codebazan.ir/" alt="کدبازان" title="کدبازان" class="codebazanmap2-area" id="codebazanmap2-area-1" />
     <!---- پایان ادرس لینک شما در این قسمت---->

</map>
</center>
   <div style='display:none'><h1><a title="%DA%A9%D8%AF%D8%A8%D8%A7%D8%B2%D8%A7%D9%86" href="https://codebazan.ir">%DA%A9%D8%AF%D8%A8%D8%A7%D8%B2%D8%A7%D9%86</a></h1></div>
</body>
</html>

کد شماره ۲ بسیار کوتاه  با استایل متفاوت

 

<style>
area:hover{
    border:40px solid #ff66ff;
    border-radius:100px;
    position:absolute; 
    top:50px; left:10px;
}
</style>


<img src="https://www.codebazan.ir/test.png" alt="https://codebazan.ir" usemap="#codebazanmap">


<map name="#codebazanmap">
<area  href="https://codebazan.ir" coords="-1, -1, 100, 100" shape="rect"></map>

 <div style='display:none'><h1><a title="%DA%A9%D8%AF%D8%A8%D8%A7%D8%B2%D8%A7%D9%86" href="https://codebazan.ir">%DA%A9%D8%AF%D8%A8%D8%A7%D8%B2%D8%A7%D9%86</a></h1></div>

برای تست کدهای فوق میتوانید از ابزار پیش نمایش کدبازان استفاده نمایید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *