jQuery onchange/onfocus sélectionnez la case pour afficher une image?

J'ai besoin d'aide pour trouver un plugin jQuery qui me permet d'afficher un aperçu de l'image à partir d'une liste de sélection d'images - onfocus/onchange ..jQuery onchange/onfocus sélectionnez la case pour afficher une image?

Exemple:

<select name="image" id="image" class="inputbox" size="1"> 
    <option value=""> - Select Image - </option> 
    <option value="image1.jpg">image1.jpg</option> 
    <option value="image2.jpg">image2.jpg</option> 
    <option value="image3.jpg">image3.jpg</option> 
</select> 

<div id="imagePreview"> 
    displays image here 
</div>

Quelqu'un at-il rencontré quelque chose comme ce? J'ai essayé de le chercher en vain.

Merci!

Source

2009-06-12 SoulieBaby

Je ne suis pas sûr que vous avez besoin d'un plugin pour traiter ceci:

$(document).ready(function() { 
    $("#image").change(function() { 
     var src = $(this).val(); 

     $("#imagePreview").html(src ? "<img src='" + src + "'>" : ""); 
    }); 
});

Source

2009-06-12 00:37:46

merci muchly, exactement ce que je voulais !! :) – SoulieBaby

Merci, mais il fait aussi la même chose que j'ai déjà fait. Quelque chose d'autre ...? –

+1 Élégant et simple. – Rap

Je ne pense pas qu'il y ait un plugin pour cela, mais il est assez trivial de le faire « à la main »

$(document).ready(function(){ 
    $('#image').change(function(){ 
      $('#imagePreview').html('<img src="'+$('#image').val()+'"/>'); 
    }); 
});

Vous devez ajouter une validation pour les images inexistantes et autres. Votre kilométrage peut varier. etc.

Source

2009-06-12 00:45:00 codehead

Avez-vous vraiment besoin d'un plugin?

Quelque chose de simple comme ci-dessous fonctionnerait?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>JQuery Image</title> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#image").change(function() { 
    $("#imagePreview").empty(); 
    if ($("#image").val()!=""){ 
     $("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />"); 
    } 
    else{ 
     $("#imagePreview").append("displays image here"); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 
<select name="image" id="image" class="inputbox" size="1"> 
    <option value=""> - Select Image - </option> 
    <option value="image1.jpg">image1.jpg</option> 
    <option value="image2.jpg">image2.jpg</option> 
    <option value="image3.jpg">image3.jpg</option> 
</select> 

<div id="imagePreview"> 
    displays image here 
</div> 


</body> 
</html>

Source

2009-06-12 00:46:00 tschaible

Autre méthode avec AJAX. Je ne l'ai pas testé, mais googlé sur le sujet. Voici quelques notes:

http://forums.asp.net/t/1107236.aspx

côté serveur

response.contentType('image/jpeg'); 
response.binaryWrite(imageBytes);

Displaying ad content from Respose.WriteFile()/ Response.ContentType

http://www.dotnetperls.com/response-writefile

Response.WriteFile usage:   10.680 s 
Byte[] cache, Response.BinaryWrite: 0.094 s

Source

2011-10-01 11:33:54

Je partage ici la version javascript pur pour changer l'image en utilisant la liste déroulante: -

<html> 
<head> 
<title></title> 
<script language="JavaScript" type="text/javascript"> 
var Path='http://www.domainname.com/images/'; 
function CngColor(obj){ 
index=obj.selectedIndex; 
if (index<1){ return; } 
document.getElementById('Img1').src=Path+obj.options[index].value; 
} 

</script></head> 
<body> 

<select onchange="CngColor(this);" > 
<option >Select</option> 
<option value="Zero.gif" >Zero</option> 
<option value="One.gif" >1</option> 
<option value="Two.gif" >2</option> 
<option value="Three.gif" >3</option> 
<option value="Four.gif" >4</option> 
</select> 

<img id="Img1" src="http://www.domainname.com/images/Blank.gif" width=100 height=100 > 

</body> 
</html>

Source

2012-11-23 12:39:52

cela ne fonctionne pas sur IE .. aucune idée? –

jQuery onchange/onfocus sélectionnez la case pour afficher une image?

Répondre

Questions connexes