Align IMG to the left
Question
I have that code and a need some help with that
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
<script>
function run1() {
document.getElementById("Ener").value = document.getElementById("Energia").value;
}
</script>
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
} ?
</script>
<script type language="javascript">
function cargar_imagen(imagen) { var img = document.getElementById("myimage"); var img_dir = "http://silvercowgames.com/ENADRYA/imagenes/cartas"; if (img) { img.src = img_dir + imagen; } }
</script>
<select name="imagenes" onchange="" id="Ultra1">
<option value="/Johas/Madriguera-Tolva.jpg">Madriguera Tolva</option>
<option value="/Johas/Coriacia-ancestral.jpg">Coriacia Ancestral</option>
<option value="/OrgulloNativo/Intraterreno-sulko.jpg">Intraterreno Sulko</option>
<option value="/OrgulloNativo/Carjas-invadida.jpg">Carjas Invadida</option>
</select>
<select id="Ultra" style="visibility:hidden">
<!--Call run() function-->
<option value="18">Imagen 1</option>
<option value="16">Imagen 2</option>
<option value="19">Imagen 3</option>
<option value="20">Imagen 4</option>
</select>
<br>
<br>
<select id="Energia" style="visibility:hidden">
<!--Call run() function-->
<option value="6">Imagen 1</option>
<option value="6">Imagen 2</option>
<option value="5">Imagen 3</option>
<option value="4">Imagen 4</option>
</select>
<script>
document.getElementById('Ultra1').addEventListener("change", function() {
document.getElementById('Ultra').selectedIndex = document.getElementById('Ultra1').selectedIndex;
run();
cargar_imagen(document.getElementById('Ultra1').value)
document.getElementById("Total").value = document.getElementById("Ultra").value;
}, false);
</script>
<script>
document.getElementById('Ultra1').addEventListener("change", function() {
document.getElementById('Energia').selectedIndex = document.getElementById('Ultra1').selectedIndex;
run1();
cargar_imagen(document.getElementById('Ultra1').value)
document.getElementById("TotalE").value = document.getElementById("Energia").value;
}, false);
</script>
<img alt src="http://silvercowgames.com/ENADRYA/imagenes/cartas/Johas/Coriacia-ancestral.jpg" id="myimage" align="center">
<br>
<form name="frm1">
<br> Defensa de la Base:
<BR>
<input type="text" name="uno" id="srt" )>
<br>
<br> Energia de la Base:
<BR>
<input type="text" name="uno1" id="Ener" )>
<br>
<br>
</form>
<script>
function sumar(uno, dos) {
var total;
total = parseInt(uno.value) + parseInt(dos.value);
document.getElementById("srt").value = ("Defensa actual:" + total);
document.getElementById("Total").value = (total);
}
</script>
<html>
<form name="prueba">
Defensa:
<BR>
<input type="text" name="uno" id="Total">
<br> Modificador ("+/-")
<BR>
<input type="text" name="dos">
<input type="button" name="Ver total" value="Calcular Defensa" onclick="sumar(uno,dos)">
</form>
</html>
<script>
function sumar1(uno1, dos2) {
var total1;
total1 = parseInt(uno1.value) + parseInt(dos2.value);
document.getElementById("Ener").value = ("Energia actual:" + total1);
document.getElementById("TotalE").value = (total1);
}
</script>
<html>
<form name="prueba">
Energia:
<BR>
<input type="text" name="uno1" id="TotalE">
<br> Modificador ("+/-")
<BR>
<input type="text" name="dos2">
<input type="button" name="Ver total" value="Calcular Energia" onclick="sumar1(uno1,dos2)">
</form>
</html>
And I need the images with an align to the left, when you change the img i want the img to appear in the left and not in the center like now. Im trying to see what's the problem but i cant found it :S so i came here for your help, i think that the problem its in the script to make the images appear but its just a theory Thanks for the time !
3 answers
solution1
1 2015-08-27 18:29:42
Currently image is center align because you used following code in your file:
<img alt src="http://silvercowgames.com/ENADRYA/imagenes/cartas/Johas/Coriacia-ancestral.jpg" id="myimage" align="center">
Add this line within script tag. Hope this will work for you:
document.getElementById('myimage').align='left';
solution2
0 2015-08-27 18:12:47
You've used visibility: hidden; to hide the select box and this is pushing the image over. This css property doesn't actually remove the element from the DOM, it just makes it invisible. In that respect it's the same as opacity: 0;
display: none; will completely remove the element from the DOM meaning it's size has no bearing on the surrounding elements positions.
In all cases the form field will still submit. You'd need to edit the html to stop that.
solution3
0 2015-08-27 18:13:32
Change the visibility:hidden to display:none .
The problem right now is the select boxes which you are currently hiding are still there. It really occupies the space, which is pushing the image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.