Change image size by java script (Document.getElementById("showw"). src="img/sua_imagem.jpg"

Question

Change image size by java script (Document.getElementById("showw"). src="img/sua_imagem.jpg"

Asked 5 years, 2 months ago

Viewed 51 times

2

created a div with the id content( and within the div created a

ai through javascript I am trying to insert an image as follows:

$(document).ready(function(){

	$("#btn1").click(function(){
		document.getElementById('showw').src = "https://www.youtube.com/watch?v=tytPcvyJASc";
		$("#conteudo").show();
	})

	$("#btn2").click(function(){
		document.getElementById('showw').src = "https://www.youtube.com/watch?v=7B92VAqP2dw";
		$("#conteudo").show();
	})

	$("#btn3").click(function(){
		document.getElementById('showw').src = "";
		$("#conteudo").show();
	})

	$("#btn4").click(function(){
		var img1 = document.getElementById('showw')
		img1.src = "img/fusca1.jpg";
		img1.style.width = 30;
		img1.style.height = 30;

		$("#conteudo").show();
	})

	$("#btn5").click(function(){
		var img2 = document.getElementById('showw')
		img2.style.width = 599;
		img2.style.height = 399;

		$("#conteudo").show();
	})

	$("#btn6").click(function(){
		var img3 = document.getElementById('showw').src = "img/fusca1.jpg";
		img3.style.width = 599+"px";
		img3.style.height = 399+"px";

		$("#conteudo").show();
	})
});

#corpo{
	background: black;
}
#cpesquerdo{
	width: 400px;
	height: 220px;
	border: solid 2px #00FFFF;
	background: #8A2BE2;
	position: absolute;
	left: 10%;
	top: 30%;
	text-align: center;
}
#tabela1{
	border: 2px solid;
	width: 250px;
	position: relative;
	left: 20%;
	background: black;
	text-align: center;
	color: red;
}
#tabela2{
	border: 2px solid;
	width: 250px;
	position: relative;
	left: 20%;
	background: black;
	text-align: center;
	color: red;
}
#conteudo{
	border: 2px solid;
	width: 600px;
	height: 400px;
	position: absolute;
	background: red;
	left: 45%;
	top: 15%;
}
#showw{
	width: 599px;
	height: 399px;
}
#img1{
	width: 599px;
	height: 399px;
}

#btn1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

#btn2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

#btn3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

#btn4{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

#btn5{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

#btn6{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #000000;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#292929 0%,
		#ebebeb 52%,
		#dbdbdb 51%,
		#bd0a19);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#292929),
		color-stop(0.52, #ebebeb),
		color-stop(0.51, #dbdbdb),
		to(#bd0a19));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	-webkit-box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	box-shadow:
	0px 1px 3px rgba(000,000,000,0.5),
	inset 0px 0px 2px rgba(000,000,000,1);
	text-shadow:
	0px -1px 0px rgba(000,000,000,0.8),
	0px 1px 0px rgba(135,135,135,1);
}

<!DOCTYPE html>
<html>
<head>
	<title> Atividade Extra </title>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" href="css/estilo.css">
	<script src="js/jquery-3.3.1.min.js"> </script>
	<script src="js/meu-script.js"></script>
</head>
<body id="corpo">


	<div id="cpesquerdo">
		
		<br>
		<table id="tabela1">
			<tr>
				<td> Vídeos </td>
			</tr>
		</table>
		<br>
		<button id="btn1"> Vídeo 1 </button>
		<button id="btn2"> Vídeo 2 </button>
		<button id="btn3"> Vídeo 3 </button>
		<br>
		<br>
		<table  id="tabela2">
			<tr>
				<td> Imagens </td>
			</tr>
		</table>
		<br>
		<button id="btn4"> Imagem 1 </button>
		<button id="btn5"> Imagem 2 </button>
		<button id="btn6"> Imagem 3 </button>

	</div>

	<div id="conteudo">
		<iframe id="showw">  </iframe>
	</div>

</body>
</html>

The image is showing, but I can’t change its size, even using the above commands. Can anyone help me? I’m a beginner in javascript. and I’m also in trouble when I put a youtube link, it turns out that The connection with www.youtube.com has been refused.

1

First of all, I have identified, face to face, that you did not define the unit of measurement in some properties. Example: img1.style.width = 30; should be something like img1.style.width = '30px';.

– LipESprY

2019/04/24 at 17:44

2 answers

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Leonardo Barros • **898** points · Answer 1 · 2019-04-24T17:44:02+00:00

According to the documentation of jQuery, you can manipulate the CSS using the function .css().

In your case,

.css( "width", "30px" );

And in the case of Youtube, Youtube Iframe API and Embed videos and playlists, can help you.

by Suzerain • 1 point · Answer 2 · 2019-04-24T17:52:26+00:00

you don’t need CSS, the object already has a property "width"

<script>
    var img1 = document.getElementById('showw')
    img1.src = "img/fusca1.jpg";
    img1.width = 30;
    img1.height = 30;
</script>

You don’t need img1.style. use directly img1.width