Jquery Efekti ve Buton Sorunu

10-06-2010, 13:46:10

Merhabalar...
Wordpresste "Yorum Gönder" butonuna jquery efekti yapmak istiyorum.Ancak <a href=""> kodunu kaldırdığımda efekt bozuluyor. Wordpress'te submit butonu da <input> kodları arasında:

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Yorumu Gönder" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>

Jquery Efekt kodlarım ise şu:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">        	
$(document).ready(function(){

    //Set opacity on each span to 0%
    $(".rollover").css({'opacity':'0'});

	$('.img_list a').hover(
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 1);
		},
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 0);
		}
	)

});		
</script>

	
<style type="text/css">
	
img { border:0px; }
		
ul.img_list {
	display:inline;
	float:left;
	height:280px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}	
	
li.image_one a {
	display:block; 
	width:120px; 
	height:30px; 
	position:relative;
}	

li.image_one a .rollover {
	display:block; 
	position:absolute; 
	top:0; 
	left:0; 
	width:120px; 
	height:30px; 
	background:url(images/gonder2.png);
}
	
</style>	
	
</head>


<body>

<ul class="img_list">
    <li class="image_one"><a href="#">
<span class="rollover"></span><img src="http://zone.org/images/gonder.png" alt="" width="120" height="30" /></p></a></li>
</ul>

Bu kodun arasına submit kodunu nasıl yerleştirebilirim?

10-06-2010, 14:04:41

#2

~~JustGo~~

Üyeliği durduruldu

Kodlarla biraz oynadım ama istediğin bu sanırım al bakalım.

<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">        	
$(document).ready(function(){

    //Set opacity on each span to 0%
    $(".rollover").css({'opacity':'0'});

	$('.img_hover').hover(
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 1);
		},
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 0);
		}
	)

});		
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
.img_hover { width: 32px; height: 32px; position: relative; display: block; cursor: pointer; }
.img_hover .rollover { width: 32px; height: 32px; display: block; position: absolute; left: 0; top: 0; }
</style>	
</head>
<body>
<p class="img_hover">
	<span class="rollover"><img src="http://cdn.iconfinder.net/data/icons/woothemesiconset/32/error_button.png" alt=""/></span>
	<input name="submit" type="image" src="http://cdn.iconfinder.net/data/icons/woothemesiconset/32/search_button_green.png" id="submit" tabindex="5" class="submit_button" value="Yorumu Gönder" />
</p>
<p>
	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
</body>
</html>

10-06-2010, 16:23:39

#3

Unforgiven

Oldu çok teşekkür ederim.Yalnız tek bir sorun var o da buton üzerinde Yorumu Gönder yazısı gözükmüyor.Onun için hangi kod gerekli?

10-06-2010, 17:20:35

#4

~~JustGo~~

Üyeliği durduruldu

buton tipi olarak image yaptım, submit kullanmadım. Butonda resim kullanıcaksan bunun için varolan kodu kullanman mantıklı olandır. Resmin üzerine yazıyı yaz yada type="submit" yapıp submit_button sınıfına css özelliklerini tanımla.

10-06-2010, 17:30:12

#5

Unforgiven

Peki çok teşekkür ederim yardımlarınız için.