将IMG左对齐

时间:2015-08-27 18:00:01

标签: javascript html select alignment

我有这个代码,需要一些帮助

<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>

我需要左边对齐的图像,当你改变img我想让img出现在左边而不是像现在一样出现在中心。 我试图看看问题是什么,但我找不到:S所以我来到这里是为了你的帮助,我认为这个问题在剧本中出现,但它只是一个理论 谢谢你的时间!

3 个答案:

答案 0 :(得分:1)

当前图片是居中对齐,因为您在文件中使用了以下代码:

<img alt src="http://silvercowgames.com/ENADRYA/imagenes/cartas/Johas/Coriacia-ancestral.jpg" id="myimage" align="center">

在script标记中添加此行。希望这对你有用:

document.getElementById('myimage').align='left';

答案 1 :(得分:0)

您已使用visibility: hidden;隐藏选择框,这就是将图像推过去。这个css属性实际上并没有从DOM中删除该元素,只是让它不可见。在这方面,它与opacity: 0;

相同

display: none;将完全删除DOM中的元素,这意味着它的大小与周围元素位置无关。

在所有情况下,表单字段仍将提交。您需要编辑html才能停止播放。

答案 2 :(得分:0)

visibility:hidden更改为display:none

现在的问题是您当前隐藏的选择框仍然存在。它确实占据了推动图像的空间。