En primer lugar, solo quiero decir que no sé casi nada cuando se trata de Javascript, así que perdóname si uso la jerga incorrecta.
Estoy tratando de hacer un diseño para tumblr donde la imagen de la barra lateral cambiará al actualizar. Estoy usando un diseño existente y siguiendo otro tutorial sobre cómo lograr el efecto.
La clase CSS para la barra lateral se llama "side-img".
El CSS del diseño original es el siguiente
<img class="side-img" src="{image:Sidebar Image}">De otro tutorial, se me pide que lo reemplace con el siguiente código para que funcione la imagen cambiante de la barra lateral.
<script language="JavaScript"> <!-- function random_imglink(){ var myimages=new Array() //specify random images below. You can have as many as you wish myimages[1]="IMAGE URL" myimages[2]="IMAGE URL" myimages[3]="IMAGE URL" var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<img src="'+myimages[ry]+'" border=0>') } random_imglink() //--> </script>La imagen de la barra lateral cambia al actualizar, pero ahora también pierde todo el estilo de clase CSS que se había establecido en el diseño original (por ejemplo, esquina redondeada, ancho del borde, color, etc.).
Busco consejo al respecto. ¡Gracias!
Es porque estás creando un nuevo elemento con
document.write('<img src="'+myimages[ry]+'" border=0>')y a ese elemento le falta la clase css que le da estilo.
Probar
document.write('<img class="side-img" src="'+myimages[ry]+'" border=0>')Múltiples problemas pero
<script language="JavaScript"> No es válido, no hay ningún atributo de language para las etiquetas <script> .
Bueno, lo hay, pero está en desuso .
var myimages=new Array()No se recomienda crear una matriz como esta, se prefiere usar:
var images = [] Si desea cambiar aleatoriamente el atributo src de una imagen, esta es la forma de hacerlo:
<img class="side-img" id="random-image"> <script> var images = ["1.png", "2.png"] var index = Math.floor(Math.random() * images.length) document.querySelector("#random-image").src = images[index] </script>