picture upload on mouseover on div

vasilev

vasilev

Registered
здравейте ,
мъча един скрипт за ъплоуд на аватар като бутонът за ъплоуд да се покаже когато си над снимката .
той се показва но започва и да изчезва . ако размърдам мишката над аватара се вижда как се скрипва по едно време . все едно див-а не е над цялата снимка а той е .. и защо пък се крие :)
моля кажете ми къде бъркам..


http://vasilvasilev.eu/test/
 
предложение :
Код: 
$('.profile_pic').hover(function() {
		button.fadeIn(200);
	},
	function() {
		button.fadeOut(3000);
	});

- чисто и просто .. :D
 
хм , и с show , hide , mouseenter , mouseout го тествах и пак същото .
според мен е нещо до дивовете защото бутонът се крие и когато си в картинката а то трябва когато си извън нея .
 
махнах го .
е същото :)
върти мишката над снимката и виж как се редуват ефектите .
трябва като си над снимката да се появи текста а като излезнеш от нея да се скрие ..
 
[js]$(document).ready(function(){
var button = $('#change_button');
button.hide();
$('.profile_pic').mouseenter(function() {
button.show();
});
$('.profile_pic').mouseleave(function() {
button.hide();
});
});[/js]

Разкарай стария js код и сложи тоя. Няма как да не работи.

П.П.

Код: 
jQuery JavaScript Library v1.3.1

Не ли е малко старичко това ?
 
видях че е старо jquery то , сложих 1.8 но пак същата простотия .
когато сложа дива да не е absolute , този с бутонът - change_button
се появява под снимката , и всичко е ок .
но когато е върху снимката се омазва .
според мен е точно до тези дивове но не му разбирам как да е ..
 
vasilev каза:
видях че е старо jquery то , сложих 1.8 но пак същата простотия .
когато сложа дива да не е absolute , този с бутонът - change_button
се появява под снимката , и всичко е ок .
но когато е върху снимката се омазва .
според мен е точно до тези дивове но не му разбирам как да е ..
Увеличете...
Тоя другия js който си го вкарал ajax нещо си да не ти прави той някакви проблеми ? Защото с този твоя код при мен работи всичко както трябва. Пробвай ако не вярваш

HTML: 
<html>
<title>Change Image</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
	
	var button = $('#change_button');
	var spinner = $('#spinner');
	button.css('opacity', 1);
	spinner.css('top', ($('.profile_pic').height() - spinner.height()) / 2)
	spinner.css('left', ($('.profile_pic').width() - spinner.width()) / 2)
	$('.profile_pic').hover(function() {
		button.css('opacity', .5);
		button.fadeIn(200);
	},
	function() {
		button.fadeOut(200);
	});
	
    new AjaxUpload(button,{
    	action: 'upload.php', 
		name: 'myfile',
		onSubmit : function(file, ext){
			spinner.css('display', 'block');
			// you can disable upload button
			this.disable();
			},
		onComplete: function(file, response){
			button.stop(false,true).fadeOut(200);
			spinner.css('display', 'none');
			$('#profile_img').attr('src', response);
			// enable upload button
			this.enable();
		}
	});
	
});
  
</script>
<style type="text/css">
	div.profile_pic{
		display:block;
		position:relative;
		width:150px;
		height:150px;
	}
	div.change_button{
		position:absolute;
		bottom:0px;
		left:0px;
		display:none;
		background-color:black;
		font-family: 'tahoma';
		font-size:12px;
		text-decoration:none;
		color:white;
		width:150px;
		height:150px;
	}
	div.change_button_text{
		padding:10px;
		position:absolute;
		bottom:0px;
		display:block;
	}
	#spinner{
		position:absolute;
	}
</style>
</head>
<body>
	<div class='profile_pic'>
		<img src='http://vasilvasilev.eu/test/noimagebig.jpg'  id="profile_img" />
		<div class='change_button' id='change_button'>
			<div class='change_button_text'>Change my photo</div>
		</div>
	</div>
    	<div id="spinner" style="display:none">
		<img src="http://vasilvasilev.eu/test/spinner_large.gif" border="0">
	</div>
</body>
</html>
 
Лошо , прав си работи :(
исках някакъв скрипт за смяна на аватар с един клик и просто потърсих ajax upload picture И попаднах на някакъв който ми допадна :)
но видях този проблем и не можах да го оправя .
без втория скрипт не работи ъплоуда на аватара ..
 
Не знам точно как искаш да го направиш, но да ти дам една идея. Вместо тоя текст слагаш един input за upload и му махаш стила(да остане само текста) и като мине върху картинката да му се появи и да му се отвори. Не съм сигурен дали искаш това защото не съм гледал къв е тоя код и какво прави точно.
 
и аз мислих така с отделен бутон само че 30X30px който да е извън аватара :)
ок майната му правя го да работи .
това е скрипт за постване на снимка без рефреш на самата страница с ajax финкция .

мерси .
 
според мен тоя div id="spinner" трябва да влезе целия в profil_pic div, задаваш на profil_pic височина и ширина с overflow:hidden, после пишеш малко js като при преминаване върху profil_pic да покаже картинката

всъщност ако си взел всичко както е от самия клас ще е хубаво да промениш стойносттите на margin в класа на js защото ги изкарва извън картинката и не може да се симулира клик, това няма да работи на crome 100%
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе