এইচটিএমএলে চিত্রের জন্য মাউসওভারটিতে পাঠ্য প্রদর্শন করুন


130

আমি যখন ব্যবহারকারী ছবিটি মাউস করে পাঠ্য প্রদর্শন করতে চাই।

আমি এইচটিএমএল / জেএস এ কীভাবে করতে পারি?

উত্তর:


241

আপনি titleগুণাবলী ব্যবহার করতে পারেন ।

<img src="smiley.gif"  title="Smiley face"/>

আপনি চান হিসাবে ইমেজ উত্স পরিবর্তন করতে পারেন।

এবং @ গ্রে মন্তব্য হিসাবে :

এছাড়াও আপনি ব্যবহার করতে পারেন titleমত অন্যান্য জিনিষের উপর <a ...নোঙ্গর, <p>, <div>, <input>, ইত্যাদি দেখুন: এই


3
এছাড়াও আপনি ব্যবহার করতে পারেন titleমত অন্যান্য জিনিষের উপর <a ...নোঙ্গর, <p>, <div>, <input>, ইত্যাদি .. দেখুন: w3schools.com/tags/att_global_title.asp
গ্রে

16

আপনি
এখানে সিএসএস হোভার লিঙ্কটি jsfiddle এ ব্যবহার করতে পারেন : http://jsfiddle.net/ANKwQ/5/

এইচটিএমএল:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>

সিএসএস:

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}​

4

আপনি এটির মতোও করতে পারেন:

এইচটিএমএল:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

জাভাস্ক্রিপ্টে:

function somefunction()
{
  //Do somethisg.
}


3

আপনি কোনও চিত্রের পটভূমির সাথে সিএসএস হোভার ব্যবহার করতে পারেন।

সিএসএস

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

এইচটিএমএল

<div class="image"><a href="#">Text you want on mouseover</a></div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.