Arama butonu
Bu konudaki kullanıcılar: 1 misafir
19
Cevap
929
Tıklama
0
Öne Çıkarma
js ile nasıl hover yaparım ?
V
10 yıl
Yarbay
Konu Sahibi

aşağıda resim için buldum ama bunun aynısnın yazılar için yapanını bulamadım

<img src="logo.gif" onmousemove="this.src='loader.gif'" onmouseout="this.src='logo.gif'" />


111 yazcak üstüne gelince 22222 yazcak üstünden çıkınca yine 11111 olcak tıklayınca zaten belirli linke gidicek ?



V
10 yıl
Yarbay
Konu Sahibi

yardım lütfen



J
10 yıl
Yüzbaşı

if on mouse = 1
xxxx
else
xxxx

Yapamaz misin

(Bilgim yok ,fikir vermek icin yazdim)



< Bu ileti mini sürüm kullanılarak atıldı >
Bu mesaja 1 cevap geldi.
V
10 yıl
Yarbay
Konu Sahibi

quote:

Orijinalden alıntı: mrgll

if on mouse = 1
xxxx
else
xxxx

Yapamaz misin

(Bilgim yok ,fikir vermek icin yazdim)

Denedim bişeyler ama beceremedim eğer aşağıdaki kodu bana resim için değil yazı için olanını teslim eden olrusa çok sevinirim

<img src="logo.gif" onmousemove="this.src='loader.gif'" onmouseout="this.src='logo.gif'" />



R
10 yıl
Yüzbaşı

Bunun çözümü nü biliyorum ama önce sen jquery i bilirmisin ona göre cözum üretecem de ?



< Bu ileti mobil sürüm kullanılarak atıldı >
Bu mesaja 1 cevap geldi.
V
10 yıl
Yarbay
Konu Sahibi

abi acıkcası hiçbirini bilmiomki zaten :)

bana veriolar kod bende ekliom


Bu mesaja 1 cevap geldi.
R
10 yıl
Yüzbaşı

Tmm o zaman sana kodları atıyorum ama ne yapmak istediğini anlamadım?



N
10 yıl
Yarbay

1 ay geçmiş hortlatmışlar konuyu ama hala çözemediysen yazayım kodlarını. Jquery ile basit bir şekilde .hover() yada .mouseenter() - .mouseleave() komutları ile yapabilirsin.


Bu mesaja 1 cevap geldi.
V
10 yıl
Yarbay
Konu Sahibi

quote:

Orijinalden alıntı: NoN3

1 ay geçmiş hortlatmışlar konuyu ama hala çözemediysen yazayım kodlarını. Jquery ile basit bir şekilde .hover() yada .mouseenter() - .mouseleave() komutları ile yapabilirsin.

çok sevinirim arkadaslar..üstüne gelince hover falan işte şık ne varsa lütfen :) cünkü ben html içi calısıyorum extra css kullanmıyorum.
direk linke vermek istiyorum html içinde.

herşey oluyor bi tek hoverlar falan olmuyomus ancak js gerekiomus.
ben amatorum anlamam bana örnek olarak bi tane hoverli üstüne gelince değişsin üstünden geidince eski halini alsın yada değişik efekt olabilir.


ben sadece linklerimi üstüne gelince şık olsun ustunden gidincede eskiye dönsün istiyorum.

yani size bırakabilirim üstüne gelince ne olacağını sadece üstünden gidince eskisi gibi olsun.değeişik efektered çok isterdim tabi oynayabilrzıplaya bilir parlayabilir parlasa iyiydi :) parlama diye bişe varmı bilmiyorum


Bu mesaja 1 cevap geldi.
N
10 yıl
Yarbay

<script> 
$(document).ready(function() {
var mEnterIMG = ''loader.gif';
var mLeaveIMG = 'logo.gif';

$( "#hover" ).hover(function(){
$(this).attr("src", mEnterIMG);
}, function(){
$(this).attr("src", mLeaveIMG);
});
});
</script>

<img src="images/logo.png" id="hover" />


Bu şekilde değiştrebilirsin mEnterIMG resmin üzerindeyken mLeaveIMG ise mouse resmin üzerinden ayrılınca gelecek resimlerdir. Ancak bunu kullanman için <head></head> arasına

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Bunu yazman gerekmektedir.


Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase
R
10 yıl
Yüzbaşı

Sorun çözülmüstür heralde arkadaş göndermiş saolsun ...



< Bu ileti mobil sürüm kullanılarak atıldı >

R
10 yıl
Yüzbaşı

Başka sorunlar olursa beklerim buna cevap vermedim çünkü girince başkaları yardımcı olmuş ... :)



< Bu ileti mobil sürüm kullanılarak atıldı >

V
10 yıl
Yarbay
Konu Sahibi

quote:

Orijinalden alıntı: NoN3

<script> 
$(document).ready(function() {
var mEnterIMG = ''loader.gif';
var mLeaveIMG = 'logo.gif';

$( "#hover" ).hover(function(){
$(this).attr("src", mEnterIMG);
}, function(){
$(this).attr("src", mLeaveIMG);
});
});
</script>

<img src="images/logo.png" id="hover" />


Bu şekilde değiştrebilirsin mEnterIMG resmin üzerindeyken mLeaveIMG ise mouse resmin üzerinden ayrılınca gelecek resimlerdir. Ancak bunu kullanman için <head></head> arasına

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Bunu yazman gerekmektedir.

gerçekten çok teşekkürler fakat ben head tagları arasına değil a hreften sonra eklenebilecek bi kod arıyodum en yukardaki kod gibi.

diğer söliceğim ise ben resim değil link'e yapmak istiyorum bu işlmei ilk mesajımda belirtmiştim detyaları çok teşekkürler


Bu mesaja 1 cevap geldi.
N
10 yıl
Yarbay

Tam anlayamadım ama anladıysam kod şu şekilde olmalı;

<script> 
$(document).ready(function() {
var mEnterIMG = 'loader.gif';
var mLeaveIMG = 'logo.gif';
$("#mHover").attr("src", mLeaveIMG);

var mEnterTEXT = '2222';
var mLeaveTEXT = '1111';
$("#mText").html(mLeaveTEXT);

$( "#mHover" ).hover(function(){
$(this).attr("src", mEnterIMG);
$("#mText").html(mEnterTEXT);
}, function(){
$(this).attr("src", mLeaveIMG);
$("#mText").html(mLeaveTEXT);
});
});
</script>

<img id="mHover" />
<div id="mText" /> </div>


Eğer yazılara link enklemek istersen;
var mEnterTEXT = '<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=95823513&url=link" data-href="link">2222</a>';
var mLeaveTEXT = '<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=95823513&url=link" data-href="link">1111</a>';
şeklinde ekleyebilirsin.

En başta yazı gözükmesini istemiyorsan, bu bölümdeki;

var mEnterTEXT = '2222';
var mLeaveTEXT = '1111';
$("#mText").html(mLeaveTEXT);

Şu satırı;

$("#mText").html(mLeaveTEXT);

Silerek halledebilirsin.





< Bu mesaj bu kişi tarafından değiştirildi NoN3 -- 11 Ağustos 2014; 9:13:54 >

R
10 yıl
Yüzbaşı

Diğer arkadaşların yapmasını bekledim ama çok karışık yapmışlar şimdi sana göndereceğim iki kısımdan oluşuyor birincisi sana göndereceğim normal link etiketinibody lerin arasına yaz .
İkincisi ise sana göndereceğim kodları head ların arasına yaz ve biter.



< Bu ileti mobil sürüm kullanılarak atıldı >

R
10 yıl
Yüzbaşı

Öncelikle sana bir adres verecem oraya girip dosyayı indirmelisin bu dosya jquery kütüphanesi yani yanlış anlama bu olmazsa çalışmaz o dosyayı eğer sayfa klasörüne içinde ise oraya at masaüstünde ise oraya at yani sayfanın yanında olsun



< Bu ileti mobil sürüm kullanılarak atıldı >

R
10 yıl
Yüzbaşı

Adres : jquery.com/download/
Bu adrese gir ve : Download Thé compressed production jquery 1.11.1

Yazan linke tıkla indirme başlar



< Bu ileti mobil sürüm kullanılarak atıldı >
Bu mesaja 1 cevap geldi.
R
10 yıl
Yüzbaşı

şimdii head tagları arasına göndereceklerimi yaz :

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {

$("#ornek").hover(function(e) {
$("#ornek").html("fare üzerine gelince olusan yazıyı buraya yaz")},
function(e){$("#ornek").html("en baştaki yazı yı buraya yaz")});

});
</script>

buraya kadar olanları headların arasına yaz , şimdi yazacağımıda bodylerin arasına yaz :

<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=95828127&url=#" id="ornek" data-href="#" id="ornek">en baştaki yazı</a>

bu üstteki satırıda bodylerin arasına yazdıysan GEÇMİŞ OLSUN .....

o kadar BİLGİSAYAR MÜHENDİSİ adam gelip cevap yazmış karıştırmış ortalığı ama bu kod bence daha sade ve daha kullanışlı ;)


Bu mesaja 1 cevap geldi.
R
10 yıl
Yüzbaşı

ama dediğim gibi o indirdiğin dosyayı sayfanın yanında tut muhtemelen bi hata yapacaksın ve hatanı tahmin ediyorum ama neyse sen yine yap hata olunca yazdığın kodların resmini bana gönder ben sana hatanı söylerim :)


Bu mesaja 1 cevap geldi.
R
10 yıl
Yüzbaşı

haa bu arada yazıları zıplatıp parlatabilirim ama sen daha jquery bilmiyorsun anladığım kadarıyla onun için burdan sana söylemek zor olur yoksa parlatıp zıplatmak ta bişe deil yani sende araştırırsan bulursun :)



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.