Agregar texto personalizado debajo de las imágenes en HTML

  • Autor Autor Javier Salazar
  • Fecha de inicio Fecha de inicio
Javier Salazar

Javier Salazar

No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
espero que alguin me puedo ayudar en esto simple, quiero poner debajo de cada imagen un texto osea que yo de cada imagen que se vea pueda poner un texto que yo quiera.

aqui dejo el codigo

Insertar CODE, HTML o PHP: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>new products</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/spacer.gif" width="1" height="1"></td>
    <td height="98" width="766"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="742" height="142">
      <param name="movie" value="flash/flash.swf">
      <param name="quality" value="high">
      <embed src="flash/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="742" height="142"></embed></object></td>
    <td><img src="images/spacer.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td><img src="images/spacer.gif" width="1" height="1"></td>
    <td height="528">
		<table width="718" border="0" cellspacing="0" cellpadding="0" style="height:500px; margin:18px 0 0 24px">
		  <tr>
			<td colspan="3" width="216" height="40"><img src="images/np_ch_1.jpg" width="216" height="32"></td>
			<td width="30"><img src="images/spacer.gif" width="1" height="1"></td>
			<td colspan="3" width="472"><img src="images/np_ch_2.jpg" width="472" height="32"></td>
		  </tr>
		  <tr>
			<td colspan="3" height="1" bgcolor="#E3E3E3"><img src="images/spacer.gif" width="1" height="1"></td>
			<td><img src="images/spacer.gif" width="1" height="1"></td>
			<td colspan="3" height="1" bgcolor="#E3E3E3"><img src="images/spacer.gif" width="1" height="1"></td>
		  </tr>
		  <tr>
			<td bgcolor="#E3E3E3" width="1"><img src="images/spacer.gif" width="1" height="1"></td>
			<td width="214">
				<p style="margin:16px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Lorem ipsum dolor sit</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Amet, consetetur</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Sadipscing elitr, sed di</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Nonumy eirmodte</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Mpor invidunt ut labor</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Et dolore magnaali</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Quyam erat, sed diam</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Amet, consetetur</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Sadipscing elitr, sed di</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Nonumy eirmodte</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Mpor invidunt ut labor</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Et dolore magnaali</a></p>
				<p style="margin:20px 0 0 26px"><a href="#" class="f3b"><img src="images/arr_2.jpg" width="7" height="7" style="float:left; margin:4px 10px 0 0">Quyam erat, sed diam</a></p>
			</td>
			<td bgcolor="#E3E3E3" width="1"><img src="images/spacer.gif" width="1" height="1"></td>
			<td><img src="images/spacer.gif" width="1" height="1"></td>
			<td bgcolor="#E3E3E3" width="1"><img src="images/spacer.gif" width="1" height="1"></td>
			<td width="470">
				<p style="margin:9px 0 0 18px"><a href="#"><img src="images/np_ban_1.jpg" width="217" height="141"></a><a href="#"><img src="images/np_ban_2.jpg" width="217" height="141"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_3.jpg" width="217" height="161"></a><a href="#"><img src="images/np_ban_4.jpg" width="221" height="161"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_5.jpg" width="217" height="137"></a><a href="#"><img src="images/np_ban_6.jpg" width="221" height="137"></a></p>
			</td>
			<td bgcolor="#E3E3E3" width="1"><img src="images/spacer.gif" width="1" height="1"></td>
		  </tr>
		  <tr>
			<td colspan="3" height="1" bgcolor="#E3E3E3"><img src="images/spacer.gif" width="1" height="1"></td>
			<td><img src="images/spacer.gif" width="1" height="1"></td>
			<td colspan="3" height="1" bgcolor="#E3E3E3"><img src="images/spacer.gif" width="1" height="1"></td>
		  </tr>
		</table>
	</td>
    <td><img src="images/spacer.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td style="background-image:url(images/bg_copy.jpg); background-position:top; background-repeat:repeat-x"><img src="images/spacer.gif" width="102" height="102"></td>
    <td style="background-image:url(images/bg_copy.jpg); background-position:top; background-repeat:repeat-x">
		<p style="margin:38px 0 0 0" align="center" class="foot"><a href="index.html" class="foot">home</a> &nbsp; &nbsp; | &nbsp; &nbsp; <span class="foot1">new products</span> &nbsp; &nbsp; | &nbsp; &nbsp; <a href="index-2.html" class="foot">my account</a> &nbsp; &nbsp; | &nbsp; &nbsp; <a href="index-3.html" class="foot">shopping cart</a> &nbsp; &nbsp; | &nbsp; &nbsp; <a href="index-4.html" class="foot">contact us</a></p>
		<p style="margin:14px 0 0 0" align="center" class="copy">Copyright &copy; 2006. All rights reserved</p>
	</td>
    <td style="background-image:url(images/bg_copy.jpg); background-position:top; background-repeat:repeat-x"><img src="images/spacer.gif" width="102" height="102"></td>
  </tr>
</table>

<p style="text-align:center;font-family:Tahoma;font-size:12px;"><a href="http://www.hostgator.com" style="font-size:12px;font-weight:bold;" title="Web Hosting">Web Hosting</a> by HostGator</p>
</body>
</html>
 
mmm no entiendo bien D: quieres que el texto este por debajo de la imagen ? tapando el texto ... osea texto oculto ?
y en que linea de todo ese codigo deseas hacer eso ?
 
la linea es esta:

Insertar CODE, HTML o PHP: 
<p style="margin:9px 0 0 18px"><a href="#"><img src="images/np_ban_1.jpg" width="217" height="141"></a><a href="#"><img src="images/np_ban_2.jpg" width="217" height="141"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_3.jpg" width="217" height="161"></a><a href="#"><img src="images/np_ban_4.jpg" width="221" height="161"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_5.jpg" width="217" height="137"></a><a href="#"><img src="images/np_ban_6.jpg" width="221" height="137"></a></p>
			</td>

lo que quiero es poner un texto debajo de cada imaginen osea una descripción que se vea
 
Si te refieres a la etiqueta de texto alternativo es facil

<img src="images/np_ban_1.jpg" width="217" height="141" alt="el texto que quieres que aparesca aki ">
 
quiero es un descripcion que sea visible
 
bueno, ahi tienes mucho table y ademas css embebido...
Te recomiendo busques algun template tableless, orientado a css.

para salir del paso:

reemplaza esto

HTML: 
<td width="470">
				<p style="margin:9px 0 0 18px"><a href="#"><img src="images/np_ban_1.jpg" width="217" height="141"></a><a href="#"><img src="images/np_ban_2.jpg" width="217" height="141"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_3.jpg" width="217" height="161"></a><a href="#"><img src="images/np_ban_4.jpg" width="221" height="161"></a></p>
				<p style="margin:0 0 0 18px"><a href="#"><img src="images/np_ban_5.jpg" width="217" height="137"></a><a href="#"><img src="images/np_ban_6.jpg" width="221" height="137"></a></p>
			</td>

por esto

HTML: 
			<td width="470">
			<table>
			 <tr><td><a href="#"><img src="images/np_ban_1.jpg" width="217" height="141"></a></td><td><a href="#"><img src="images/np_ban_2.jpg" width="217" height="141"></a></td></tr>
			 <tr><td align="center">texto imagen 1</td><td align="center">texto imagen 2</td></tr>
			 <tr><td><a href="#"><img src="images/np_ban_3.jpg" width="217" height="161"></a></td><td><a href="#"><img src="images/np_ban_4.jpg" width="221" height="161"></a></td></tr>
			 <tr><td align="center">texto imagen 3</td><td align="center">texto imagen 4</td></tr>
			 <tr><td><a href="#"><img src="images/np_ban_5.jpg" width="217" height="137"></a></td><td><a href="#"><img src="images/np_ban_6.jpg" width="221" height="137"></a></td></tr>
			 <tr><td align="center">texto imagen 5</td><td align="center">texto imagen 6</td></tr>
			</table>
			</td>

Saludos!
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

D
[XF 2.X] Modificación de Plantilla - Cambiar logo "xenforo" por texto personalizado
Respuestas
1
Visitas
397
KakDila
KakDila
puraco
Agregar texto personalizado en categorías de WP
Respuestas
2
Visitas
350
puraco
puraco
Z
Modificación buscador: tamaño fuente y color texto personalizados
Respuestas
5
Visitas
510
zantzue
Z
yz7hmpm
Posicionamiento del texto personalizado después de 'Leer más'
Respuestas
6
Visitas
2K
yz7hmpm
yz7hmpm
C
contenido de texto
Respuestas
0
Visitas
456
catowen
C
Atrás
Arriba