tag - Cambiar fuente de imagen con JavaScript
obtener src de una imagen javascript (12)
¡Prueba esto!
function changeimage() {
var image = document.getElementById(''imagem'');
if (image.src.match("img")) {
for(i = 1; i <= 3; i++) {
image.src = "img/image2"+i+".png";
}
} else {
image.src = "img/image1.png";
}
}
Así que soy nuevo con JavaScript (este es en realidad mi primer intento de hacer que algo funcione) y estoy teniendo un problema. Pensé que tenía los conocimientos suficientes para hacer que esto funcionara, incluso busqué en Google tutoriales y guiones que podrían ayudarme a resolver esto, pero nada me ayudó.
Parece que no puedo cambiar la fuente de la imagen, aquí está el código que tengo hasta ahora:
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a.src;
}
</script>
<div id="main_img">
<img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
<img src=''1772031_29_t.jpg'' onclick=''changeImage("1772031_29_b.jpg");''>
<img src=''1772031_55_t.jpg'' onclick=''changeImage("1772031_55_b.jpg");''>
<img src=''1772031_53_t.jpg'' onclick=''changeImage("1772031_53_b.jpg");''>
</div>
¿Podría alguien explicar por favor si estoy haciendo algo mal? ¿O quizás me estoy perdiendo algo? Ayudame por favor :-)
El problema era que estaba usando .src sin necesidad y también necesitaba diferenciar qué img quería cambiar.
function changeImage(a, imgid) {
document.getElementById(imgid).src=a;
}
<div id="main_img">
<img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
<img id="1" src=''1772031_29_t.jpg'' onclick=''changeImage("1772031_29_b.jpg", "1");''>
<img id="2" src=''1772031_55_t.jpg'' onclick=''changeImage("1772031_55_b.jpg", "2");''>
<img id="3" src=''1772031_53_t.jpg'' onclick=''changeImage("1772031_53_b.jpg", "3");''>
</div>
El siguiente programa de ejemplo utilizado para cambiar el atributo src de la imagen por cada 100 milisegundos. puede llamar a la función dada como su deseo.
<html>
<head>
</head>
<body>
<img src="bulboff.jpg" height=200 width=200 id="imm" align="right">
<script type="text/javascript">
function bulb() {
var b = document.getElementById("imm");
if(b.src.match("bulboff.jpg")) {
b.src = "bulbon.jpg";
}
else {
b.src="bulboff.jpg";
}
}
setInterval(bulb,100);
</script>
</body>
</html>
En lugar de escribir esto,
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a.src;
}
</script>
tratar:
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
En virtud de los TODO, estoy tratando de implementar su código en esta publicación. Estoy tratando de tomar el div grande a la izquierda y hacer que cambie para reflejar las selecciones a la derecha. hay dos selecciones, temperatura ambiente y temperatura corporal
<!DOCTYPE html>
<html>
<head>
<title> Temperature Selection </title>
<!-- css -->
<link rel="stylesheet" href="bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- end css -->
<!-- Java script files -->
<!-- Date.js date os javascript helper -->
<script src="js/date.js"> </script>
<!-- jQuery (necessary for Bootstrap''s JavaScript plugins) -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3/js/bootstrap.min.js"> </script>
<script src="js/library.js"> </script>
<script src="js/sfds.js"> </script>
<script src="js/main.js"> </script>
<!-- End Java script files -->
<!--TODO: need to integrate this code into the project:-->
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<script>
$(document).ready(function() {
$("#ambient").click(function(event){
var $this= $(this);
if($this.hasClass(''clicked'')){
$this.removeClass(''clicked'');
SFDS.setTemperatureType(0);
$this.find(''h2'').text(''Select Ambient Temperature 21 Degrees C'');
<!--added on 05/20/2015-->
}else{
SFDS.setTemperatureType(1);
$this.addClass(''clicked'');
$this.find(''h2'').text(''Ambient Temperature 21 Degrees C Selected'');
}
});
$("#body").click(function(event){
var $this= $(this);
if($this.hasClass(''clicked'')){
$this.removeClass(''clicked'');
SFDS.setTemperatureType(0);
$this.find(''h2'').text(''Select Body Temperature 37 Degrees C'');
<!--added on 05/20/2015-->
}else{
SFDS.setTemperatureType(1);
$this.addClass(''clicked'');
$this.find(''h2'').text(''Body Temperature 37 Degrees C Selected'');
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<header>
<div class="row">
<div class="col-xs-6">
<div id="date"><span class="date_time"></span></div>
</div>
<div class="col-xs-6">
<div id="time" class="text-right"><span class="date_time"></span></div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-offset-1 col-sm-3 col-xs-8 col-xs-offset-2 col-sm-offset-0">
<div id="temperature" class="main_button center-block">
<div class="large_circle_button">
<h2>Select<br/>Temperature</h2>
<img class="center-block large_button_image" src="images/thermometer.png" alt="">
<!-- TODO <img src=''images/dropsterilewater.png'' onclick=''changeImage("images/dropsterilewater.png");''>
<img src=''images/imagecansterilesaline.png'' onclick=''changeImage("images/imagecansterilesaline.png");''>-->
</div>
<h1></h1>
</div>
</div>
<div class=" col-md-6 col-sm-offset-1 col-sm-8 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div id="ambient" class="large_rectangle_button">
<div class="label_wrapper">
<h2>Ambient<br/>Temperature<br/>21<sup>o</sup>C</h2>
</div>
<div class="image_wrapper">
<img src="images/house.png" alt="" class="ambient_temp_image">
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
<div class="col-xs-12">
<div id="body" class="large_rectangle_button">
<div class="label_wrapper">
<h2>Body<br/>Temperature<br/>37<sup>o</sup>C</h2>
</div>
<div class="image_wrapper">
<img src="images/bodytempman.png" alt="" class="body_temp_image">
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container-fluid">
<div class="row cols-bottom">
<div class="col-sm-3">
<a href="main.html">
<div class="small_circle_button">
<img src="images/buttonback.png" alt="back to home" class="settings"/> <!-- width="49" height="48" -->
</div>
</div></a><div class=" col-sm-6">
<div id="stop_button" >
<img src="images/stop.png" alt="stop" class="center-block stop_button" /> <!-- width="140" height="128" -->
</div>
</div><div class="col-sm-3">
<div id="parker" class="pull-right">
<img src="images/#" alt="logo" /> <!-- width="131" height="65" -->
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Hola, traté de integrar con tu código.
¿Puedes echarle un vistazo a esto?
Gracias MS
<!DOCTYPE html>
<html>
<head>
<!--TODO: need to integrate this code into the project to change images added 05/21/2016:-->
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<title> Fluid Selection </title>
<!-- css -->
<link rel="stylesheet" href="bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- end css -->
<!-- Java script files -->
<!-- Date.js date os javascript helper -->
<script src="js/date.js"> </script>
<!-- jQuery (necessary for Bootstrap''s JavaScript plugins) -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3/js/bootstrap.min.js"> </script>
<script src="js/library.js"> </script>
<script src="js/sfds.js"> </script>
<script src="js/main.js"> </script>
<!-- End Java script files -->
<!--added on 05/28/2016-->
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index:40001; /* High z-index to ensure it appears above all content */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
opacity:.5; /* Sets opacity so it''s partly transparent */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE
transparency */ filter:alpha(opacity=50); /* More IE transparency */ z-index:40001; }
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor:pointer;
}
/* The Close Button */
.close2 {
}
.close2:focus {
color: #000;
text-decoration: none;
cursor:pointer;
}
.modal-header {
color: #000;
padding: 2px 16px;
}
.modal-body {padding: 2px 16px;}
}
.modal-footer {
padding: 2px 16px;
background-color: #000099;
color: white;
}
</style>
<script>
$(document).ready(function() {
$("#water").click(function(event){
var $this= $(this);
if($this.hasClass(''clicked'')){
$this.removeClass(''clicked'');
SFDS.setFluidType(0);
$this.find(''h3'').text(''Select the H20 Fluid Type'');
}else{
SFDS.setFluidType(1);
$this.addClass(''clicked'');
$this.find(''h3'').text(''H20 Selected'');
}
});
$("#saline").click(function(event){
var $this= $(this);
if($this.hasClass(''clicked'')){
$this.removeClass(''clicked'');
SFDS.setFluidType(0);
$this.find(''h3'').text(''Select the NaCL Fluid Type'');
}else{
SFDS.setFluidType(1);
$this.addClass(''clicked'');
$this.find(''h3'').text(''NaCL Selected'');
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<header>
<div class="row">
<div class="col-xs-6">
<div id="date"><span class="date_time"></span></div>
</div>
<div class="col-xs-6">
<div id="time" class="text-right"><span class="date_time"></span></div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-offset-1 col-sm-3 col-xs-8 col-xs-offset-2 col-sm-offset-0">
<div id="fluid" class="main_button center-block">
<div class="large_circle_button, main_img">
<h2>Select<br>Fluid</h2>
<img class="center-block large_button_image" src="images/dropwater.png" alt=""/>
</div>
<h1></h1>
</div>
</div>
<div class=" col-md-6 col-sm-offset-1 col-sm-8 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div id="water" class="large_rectangle_button">
<div class="label_wrapper">
<h3>Sterile<br>Water</h3>
</div>
<div id="thumb_img" class="image_wrapper">
<img src="images/dropsterilewater.png" alt="Sterile Water" class="sterile_water_image" onclick=''changeImage("images/dropsterilewater.png");''>
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
<div class="col-xs-12">
<div id="saline" class="large_rectangle_button">
<div class="label_wrapper">
<h3>Sterile<br>0.9% NaCL</h3>
</div>
<div class="image_wrapper">
<img src="images/cansterilesaline.png" alt= "Sterile Saline" class="sterile_salt_image" onclick=''changeImage("images/imagecansterilesaline.png");''>
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
<div class="col-xs-12">
<div class="small_rectangle_button">
<!-- Trigger/Open The Modal -->
<div id="myBtn" class="label_wrapper">
<h3>Change<br>Cartridge</h3>
</div>
<div class="image_wrapper">
<img src="images/changecartridge.png" alt="" class="change_cartrige_image" />
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close"><img src="images/x-icon.png"></span>
<h2>Change Cartridge Instructions</h2>
</div>
<div class="modal-body">
<h4>Lorem ipsum dolor sit amet, dicant nonumes volutpat cu eum, in nulla molestie vim, nec probo option iracundia ut. Tale inermis scripserit ne cum, his no errem minimum commune, usu accumsan omnesque in. Eu has nihil dolor debitis, ad nobis impedit per. Dicat mnesarchum quo at, debet abhorreant consectetuer sea te, postea adversarium et eos. At alii dicit his, liber tantas suscipit sea in, id pri erat probatus. Vel nostro periculis dissentiet te, ut ubique noster vix. Id honestatis disputationi vel, ne vix assum constituam.</h4>
<a href="#"><img src="images/video-icon.png" alt="click here for video"> </a>
<a href="#close2" title="Close" class="close2"><img src="images/cancel-icon.png" alt="Cancel"></a>
</div>
<div class="modal-footer">
<h4></h4>
</div>
</div>
</div>
<!--for comparison-->
<script>
// Get the modal
var modal = document.getElementById(''myModal'');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
</div>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container-fluid">
<div class="row cols-bottom">
<div class="col-sm-3">
<a href="main.html">
<div class="small_circle_button">
<img src="images/buttonback.png" alt="back to home" class="settings"/> <!-- width="49" height="48" -->
</div>
</div></a><div class=" col-sm-6">
<div id="stop_button" >
<img src="images/stop.png" alt="stop" class="center-block stop_button" /> <!-- width="140" height="128" -->
</div>
</div><div class="col-sm-3">
<div id="parker" class="pull-right">
<img src="images/parkerlogo.png" alt="parkerlogo" /> <!-- width="131" height="65" -->
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Si siempre tendrá el patrón en _b lugar de _t , puede hacerlo más genérico al hacer referencia a la imagen en sí:
onclick=''changeImage(this);''
Luego en la función:
function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
}
Su único problema real es que está pasando una cadena, no un objeto con una propiedad .src
Algunas sugerencias:
- Use un activador de elemento que se puede hacer clic de forma natural, como
<button> - Usar atributos con prefijo de
data-para datos de eventos en el elemento - Utilice eventos vinculados tarde cuando el DOM esté listo.
Margen:
<div id="main_img">
<img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
<li><button data-src=''1772031_29_b.jpg''><img src=''1772031_29_t.jpg'' /></button></li>
<li><button data-src=''1772031_55_b.jpg''><img src=''1772031_55_t.jpg'' /></button></li>
<li><button data-src=''1772031_53_b.jpg''><img src=''1772031_53_t.jpg'' /></button></li>
</ul>
JavaScript:
Si necesita admitir IE y otros navegadores heredados, use un polyfill adecuado para Array.from
function clickedButton(btn, event) {
document.getElementById(''img'').src = btn.getAttribute(''data-src'');
}
function bindClick(btn) {
btn.addEventListener(''click'', clickedButton.bind(null,btn));
}
// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
Array.from(document.querySelectorAll(''#thumb_img > button''))
.forEach(bindClick));
});
Editar: Vanilla JS para navegadores modernos.
Tiene algunos cambios (esto supone que de hecho todavía desea cambiar la imagen con una ID de IMG, si no es así, use la solución de Shadow Wizard).
Elimine a.src y reemplácelo con a :
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
Cambie sus atributos onclick para incluir una cadena del nuevo origen de la imagen en lugar de un literal:
onclick=''changeImage( "1772031_29_b.jpg" );''
Yo también tubo ese problema. Pero resuélvelo con una instancia de una imagen cada vez que cambie la fuente (imagen).
Parece que se llamaría onload solo una vez. Pero de esta manera, puede cambiar la imagen cuando lo desee.
function chageIcon(domImg,srcImage)
{
var img = new Image();
img.onload = function()
{
// Load completed
domImg.src = this.src;
};
img.src = srcImage;
}
Modo de uso
chageIcon(document.getElementById("img"),"newIcon.png");
function changeImage(a) entonces no existe tal cosa como a.src => simplemente use a .
demo here
<script type="text/javascript">
function changeImage(a) {
var picName=a.substring(1,a.length-1);
document.getElementById("image").src=picName;
}
</script>
<div id="main_img">
<img id="image" src="app.jpg">
</div>
<div id="thumb_img">
<img src=''app.jpg'' onclick="changeImage(''+5steps.jpg+'');">
<img src=''5steps.jpg'' onclick="changeImage(''+award.png+'');">
<img src=''award.png'' onclick="changeImage(''+app.jpg+'');">
</div>
Usa el código de arriba colocando este archivo html y fotos (ten cuidado con los nombres, porque he dado el código anterior con mis nombres) en la misma carpeta que obtendrás ...