HTML hyperlink dengan mouse di atas gambar

Itu tergantung di mana Anda perlu untuk menampilkan gambar. Jika Anda sedang mencari sesuatu di sepanjang baris ikon di samping atau di belakang link tersebut, Anda bisa melakukannya melalui CSS menggunakan gambar latar belakang pada keadaan hover link:

a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}

Aku melakukan ini dari atas kepalaku, sehingga Anda mungkin perlu membuat beberapa penyesuaian kecil.

Jika Anda ingin menampilkan gambar di tempat lain pada halaman, Anda bisa mencapai yang menggunakan javascript untuk menyembunyikan / menampilkan gambar di acara Gunaka mouse di atas link.

Jika ini tidak memecahkan masalah Anda, mungkin Anda bisa menyediakan beberapa informasi tambahan untuk membantu membimbing semua orang untuk jawaban yang tepat.
289047 Andrew Van Slaars html asp.net English


1 - sejauh ini adalah dengan cara paling sederhana untuk melakukan melayang. Aku pernah melihat * jauh * terlalu banyak berbelit-belit dan over-the-top javascript pendekatan untuk tugas ini ketika CSS akan melakukan apa yang kebanyakan orang ingin lebih mudah. #137977 nickf
satu-satunya yang saya ajukan adalah bahwa jika Anda menetapkan background-image pada a: link, tetapi memberikan background-position:-1000px-1000px; maka browser akan membuka langsung pergi, tapi Anda tidak akan melihat itu karena ini off-layar. Saya harap masuk akal. #137984 nickf




Anda dapat melakukannya dengan mudah dengan jquery:

$("li").hover(
function () {
$(this).append($(""));
},
function () {
$(this).find("img:last").remove();
}
);

Beberapa contoh yang lebih komprehensif yang benar-benar diuji:
http://docs.jquery.com/Events/hover
289051 Mischa Kroon html asp.net English




Hi buddy, Anda dapat melakukannya dengan menggunakan javascript ..

Ini akan menciptakan sebuah persegi yang mengikuti mouse pada elemen div atau hover.

Buat. Js file dengan orang isi di sini:


var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}


Kemudian pada html Anda lakukan hal berikut:


1.

Sertakan. Js file

2.

Dimasukkan ke dalam halaman web Anda:





Berikut ini adalah implementasi penuh dalam HTML:

bye bye!