کد نمایش عکس با رفتن روی قسمتی از متن

کد نمایش عکس با رفتن روی قسمتی از متن با این کد شما میتوانید یک گالری مخفی در گوشه ای از سایت ایجاد کنید کلا هر چی که به ذهنتون برسه میشه باهاش انجام داد.مثلا حساس کردن قسمتی از متن و نمایش عکس و…

کد نمایش عکس با رفتن روی قسمتی از متن

 

دمو کد

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 15px;
    border: 1px solid #ccc;
    float: left;
    width: 50px;
text-align: center;
}	

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 300px;
    height: 300px;

}

div.desc {
    padding: 15px;
    text-align: center;
}.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltipimg {
    visibility: hidden;
   
   
    background-color: black;
    color: #fff;
    text-align: right;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltipimg {
    visibility: visible;
}
</style>
</head>
<body>
<!-----عکس ۱------>
<div class="img">
  <div class="tooltip">&nbsp;&nbsp;پل&nbsp;&nbsp;
  <span class="tooltipimg"><img src="https://rozup.ir/view/1021039/3.jpg" alt="" width="400" height="300"></span>
</div>
</div>
<!-----عکس ۱------>


<!-----عکس ۲------>
<div class="img">
  <div class="tooltip">&nbsp;پارک&nbsp;
  <span class="tooltipimg"><img src="https://rozup.ir/view/1021038/2.jpg" alt="" width="400" height="300"></span>
</div>
</div>
<!-----عکس ۲------>


<!-----عکس ۳------>
<div class="img">
  <div class="tooltip">رودخانه
  <span class="tooltipimg"><img src="https://rozup.ir/view/1021037/1.jpg" alt="" width="400" height="300"></span>
</div>
</div>
<!-----عکس ۳------>



<div style='display:none'><h1><a title="codebazan" href="https://codebazan.ir">codebazan</a></h1></div>
</body>
</html>

 

4 Comments

  1. با سلام خدمت نباشید و تشکر بابت سایت خوبتون ببخشید من اگه بخواهم روی قسمتی از تصویر لینک ایجاد کنم و کاربر با رفتن روی اون قسمت رنگ لینک تغییر کنه چه جوری درست کنم البته استفاده از map روی عکس بلدم فقط می خواهم اون قسمت لینک شده تغییر که ممنون اگه کمک کنید

    مهران

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

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