elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  como insertar una imagen con width y height		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: como insertar una imagen con width y height  (Leído 3,657 veces)
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
como insertar una imagen con width y height
« en: 17 Abril 2013, 16:11 pm »
estoy haciendo un CMS, como incluiriais una imagen, que eso se, pero con widht, height, border, etc, tengo esto y solo incluyo las imagenes originales sin tamaño ni nada:

Código:
$('#insertar_imagen').click(function(){
	var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
	if(imgSrc != null){
		document.execCommand('insertimage',false, imgSrc);
		
	}
		return false;
	
});
he probado con esto y sin exito me borra o me lo escribe al final del contenedor contentEditable="true":

Código:
$("#contenedor").append("<img src='imagenes_clientes/Text-Heading-1-32.png'>");

Código:
$("#contenedor").html("<img src='imagenes_clientes/Text-Heading-1-32.png'>");
« Última modificación: 17 Abril 2013, 16:13 pm por tecasoft » En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.856



Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #1 en: 17 Abril 2013, 17:48 pm »
Citar
he probado con esto y sin exito me borra o me lo escribe al final del contenedor contentEditable="true":

Em... html() sobreescribe todo lo que haya dentro del contenedor y append() añade al final de dicho contenedor.. no te sorprendas porque hacen lo que tienen que hacer xD.

La pregunta es... donde lo quieres incluir ?
Lo de los parámetros:
Código
  1. <img src"ruta" width="ancho" height="alto" alt="texto alternativo" style="border:bla bla bla" />

Saludos
En línea
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #2 en: 17 Abril 2013, 20:11 pm »
es un wysiwyg dentro de contenedor donde en cualquier parte donde quiera escribir:

Código
  1. <html>
  2. <head>
  3.  
  4. <meta charset="utf-8">
  5. 	<title>Tecasoft.com | Editor</title>
  6. <link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
  7. <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  8. <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
  9.  
  10. <link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />
  11.  
  12. <link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">
  13.  
  14. </head>
  15. <body>
  16.  
  17. <div id="editor_contenido">
  18.  
  19. <table>
  20. <tr>
  21.  
  22. <td><a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;</td>
  23.  
  24. <form>
  25.  
  26. 	<td><input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;</td>
  27.  
  28. </form>
  29.  
  30. <form action="editor_vista_previa.php" method="post" target="_blank" name="form_editor">
  31.  
  32. 	<td><input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;</td>
  33.  
  34. 	<input type="hidden" name="texto">
  35.  
  36. </form>
  37.  
  38. 	<td><a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;</td>
  39. 	<td><a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;</td>
  40. 	<td><a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;</td>
  41. 	<td><a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;</td>
  42.  
  43. <td><img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;</td>
  44.  
  45. 	<td><a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;</td>
  46.  
  47. 	<td><a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;</td>
  48. 	<td><a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;</td>
  49.  
  50. 	<td><a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;</td>
  51. 	<td><a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;</td>
  52. 	<td><a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;</td>
  53.  
  54. 	<td><a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;</td>
  55. 	<td><a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;</td>
  56. 	<td><a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;</td>
  57. 	<td><a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;</td>
  58. 	<td><a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;</td>
  59. 	<td><a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;</td>
  60.  
  61. 	<td><a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;</td>
  62. 	<td><a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;</td>
  63.  
  64. 	<td><a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;</td>
  65.  
  66. 	<td><a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;</td>
  67.  
  68. <form>
  69.  
  70. 	<td><input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones"></td>
  71.  
  72. </form>
  73.  
  74. </tr>
  75. </table>
  76.  
  77. <hr>
  78. </div>
  79.  
  80.  
  81. <div id="contenedor">
  82. 	<center>
  83.  
  84. 		<div id="cabecera">
  85.  
  86. 			<div id="logo">
  87.  
  88. 			<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
  89.  
  90. 			</div>
  91.  
  92. 			<div id="anexo">
  93.  
  94. 			<img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar &#9660;)</a>			
  95.  
  96. 			</div>
  97.  
  98. 		</div>
  99.  
  100. <!-- Menu navegador -->
  101.  
  102. 		<div id="navegador">
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109. 		</div>
  110.  
  111. <!-- El contenido central -->
  112.  
  113. 	<div id="contenido">
  114.  
  115. 		<h1 class="naranja">Inicie Sesión</h1>
  116.  
  117. 		<form action="login.php" method="post" name="form1">
  118.  
  119. 		<label for="usuario">Usuario:</label>
  120. 		<input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
  121. 		&nbsp;&nbsp;&nbsp;
  122. 		<label for="contrasena">Contraseña:</label>
  123. 		<input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>
  124.  
  125.  
  126.  
  127. 		<input type="button" class="tv_sim" value="1">
  128. 		<input type="button" class="tv_sim" value="2">
  129. 		<input type="button" class="tv_sim" value="3">
  130. 		<input type="button" class="tv_sim" value="4">
  131. 		<input type="button" class="tv_sim" value="5">
  132. 		<input type="button" class="tv_sim" value="6">
  133. 		<input type="button" class="tv_sim" value="7">
  134. 		<input type="button" class="tv_sim" value="8">
  135. 		<input type="button" class="tv_sim" value="9">
  136. 		<input type="button" class="tv_sim" value="0">
  137.  
  138. 		<input type="button" id="backspace" value="&#8592;">
  139. 		<br>
  140.  
  141. <!-- Cambia a mayusculas y minusculas -->
  142. 		<input type="button" id="caps" value="Bloq.Mayus">
  143. <!-- End -->
  144.  
  145. 		<input type="button" class="tv_let" value="q">
  146. 		<input type="button" class="tv_let" value="w">
  147. 		<input type="button" class="tv_let" value="e">
  148. 		<input type="button" class="tv_let" value="r">
  149. 		<input type="button" class="tv_let" value="t">
  150. 		<input type="button" class="tv_let" value="y">
  151. 		<input type="button" class="tv_let" value="u">
  152. 		<input type="button" class="tv_let" value="i">
  153. 		<input type="button" class="tv_let" value="o">
  154. 		<input type="button" class="tv_let" value="p">
  155. 		<br>
  156. 		<input type="button" class="tv_let" value="a">
  157. 		<input type="button" class="tv_let" value="s">
  158. 		<input type="button" class="tv_let" value="d">
  159. 		<input type="button" class="tv_let" value="f">
  160. 		<input type="button" class="tv_let" value="g">
  161. 		<input type="button" class="tv_let" value="h">
  162. 		<input type="button" class="tv_let" value="j">
  163. 		<input type="button" class="tv_let" value="k">
  164. 		<input type="button" class="tv_let" value="l">
  165. 		<input type="button" class="tv_let" value="ñ">
  166. 		<br>
  167. 		<input type="button" class="tv_let" value="z">
  168. 		<input type="button" class="tv_let" value="x">
  169. 		<input type="button" class="tv_let" value="c">
  170. 		<input type="button" class="tv_let" value="v">
  171. 		<input type="button" class="tv_let" value="b">
  172. 		<input type="button" class="tv_let" value="n">
  173. 		<input type="button" class="tv_let" value="m">
  174.  
  175. 		<input type="button" class="tv_sim" value="-">
  176. 		<input type="button" class="tv_sim" value="_">
  177. 		<input type="button" class="tv_sim" value="@">
  178. 		<input type="button" class="tv_sim" value="#">
  179.  
  180.  
  181. 		<br><br>
  182. 		<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
  183. 		&nbsp;&nbsp;&nbsp;		
  184. 		<input type="submit" class="boton" value="Iniciar sesión">
  185. 		</form>
  186. 	</div>
  187.  
  188. <!-- Pie Pagina -->	
  189.  
  190. 		<div id="pie">
  191.  
  192. 		<hr>
  193.  
  194. 		<div id="pie-izq">
  195.  
  196. 		<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
  197. 		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
  198. 		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
  199. 		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
  200. 		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
  201. 		<span class="pie-izq">Hora: </span>
  202.  
  203.  
  204. 		</div>
  205.  
  206. 		<div id="pie-der">
  207.  
  208. 		<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
  209.  
  210.  
  211. 		</div>
  212.  
  213. 	<br><br>	
  214.  
  215. 	</div>
  216.  
  217.  
  218. 	</center>
  219.  
  220. </div>
  221.  
  222. <script type="text/javascript" >
  223.  
  224. $(".tv_sim").button();
  225. $(".tv_let").button();
  226. $("#backspace").button();
  227. $("#caps").button();
  228. $(".boton").button();
  229. </script>
  230.  
  231. <script type="text/javascript" src="js/wysiwyg.js"></script>
  232.  
  233. </body>
  234. </html>
  235.  
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #3 en: 27 Abril 2013, 00:32 am »
encontre esto:

Código:
$('#insertar_imagen').click(function(){
	
	var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
	if(imgSrc != null){
		document.execCommand('insertimage',false, imgSrc);
		
		$("#contenedor").contents().find("img").attr("width", "290px");
		//$("#contenedor").contents().find("#" + id).attr("width", "290px");
	}
		return false;
	
});

en esta direccion pero como hago para que no me cambien todas las imagenes(img):

http://www.webdesignerforum.co.uk/topic/61397-execcommandinsertimage-false-myvar;/
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.856



Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #4 en: 27 Abril 2013, 00:53 am »
Has leido la tercera respuesta de ese link que has dejado ?

Saludos
En línea
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #5 en: 27 Abril 2013, 15:52 pm »
he probado la parte tercera toda y nada, este codigo no hace nada tampoco.He probado de multiples formas utilizando la tercera parte y nada, no consigo ningun resultado,puedes hecharle un vistazo haber que te funciona ati, utilizo chrome:


Código:
$("#contenedor").contents().find("#" + id).attr("width", "290px");
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
tecasoft


Desconectado Desconectado

Mensajes: 319

Ciberseguridad tecasoft.com


Ver Perfil WWW
Re: como insertar una imagen con width y height
« Respuesta #6 en: 27 Abril 2013, 16:34 pm »
ya parece que funciona lo he hecho asi:

Código:
$('#insertar_imagen').click(function(){
	
	var img = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
	if(img != null){	
	var img="<img src=" + img + " width='270' height='90'>";
	document.execCommand('inserthtml',false, img);
	}
return false;
	
});

ves alguna anomalia¿?
En línea
http://www.tecasoft.com Un ninja del hacking etico, programacion en html5, css3, javascript, jquery, php, python, c/c++, ensamblador, ingenieria reversa,a auditorias de seguridad, pentesting, exploits
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
como insertar una imagen en un comentario...
Sugerencias y dudas sobre el Foro 		Lobito de noche 7 4,195 Último mensaje 29 Mayo 2013, 15:46 pm
por Lobito de noche
¿Como puedo insertar una imagen en mi ordenador?
Sugerencias y dudas sobre el Foro 		4dr14n31t0r 2 3,183 Último mensaje 8 Diciembre 2015, 11:00 am
por Eleкtro
Bootstra3 limitar el height de una pagina
Desarrollo Web 		xavidenia 2 2,249 Último mensaje 21 Septiembre 2016, 23:01 pm
por xavidenia
[Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
Desarrollo Web 		Leguim 5 2,821 Último mensaje 23 Noviembre 2019, 20:27 pm
por WHK
duda como insertar imagen
Sugerencias y dudas sobre el Foro 		DJKENSHIN 3 3,609 Último mensaje 13 Julio 2021, 22:45 pm
por el-brujo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines