Question

我希望在这里找到正确的答案。这是场景..

我有一张图片（它是一个绿色圆圈）。我有三个按钮（在线，离线，连接）。现在，我希望每当我按下这三个按钮之一时，图像就会改变（它会在不同的div上）。

在线 - 绿色圆圈图片离线 - 灰色圆圈图像连接 - 橙色Cirlce图像

任何可以帮助我开始的人？老实说，我不知道如何开始。

Answer 1

您可以使用HTML5 Canvas，它允许您使用JavaScript在屏幕上打印形状。

我已经模拟了你看到/使用：

http://jsfiddle.net/Lukedturnbull/5vz7njzf/

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

function drawCircle(colour) {
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = colour;
    ctx.fill();
}

Answer 2

这是一个没有jQuery或图像的简单示例

<html>
    <head>
        <style>
            #circle 
            {
                height:20px;
                width:20px;
                border-radius:50%
            }
        </style>
        <script>
            function changeColor(color) {
                document.getElementById("circle").style.backgroundColor = color;
            }
        </script>
    </head>
    <body>
        <div id="circle"></div>
        <input id="online" type="button" value="Online" onclick="changeColor('#0F0');" />
        <input id="offline" type="button" value="Offline" onclick="changeColor('#CCC');" />
        <input id="connecting" type="button" value="Connecting" onclick="changeColor('#F90');" />   
    </body>
</html>

在这里小提琴：http://jsfiddle.net/8ke2amoy/

Answer 3

这是一个使用jQuery将点击事件绑定到按钮的开始。

HTML

<image class="myimg" id="green" src="green.jpg"/>
<image class="myimg" id="gray" src="gray.jpg"/>
<image class="myimg" id="orange" src="orange.jpg"/>

<button class="mybutton" value="green"/>
<button class="mybutton" value="gray"/>
<button class="mybutton" value="orange"/>

的Javascript

$(document).ready(function(){
    toggleImage("green");
    $("button.mybutton").on("click",function(){
        toggleImage($(this).val());}
    );
});

function toggleImage(color) {
    $("image.myimg").hide();
    $(document).find("#" + color).show();
}

Answer 4

我让你在jsfiddle上进行现场演示，看它是否正常工作并进行测试！

    <div class="status">
<div class="green online-indicator status-icon">online</div>
<div class="grey offline-indicator status-icon">offline</div>
<div class="orange connecting-indicator status-iconr">connecting</div>
</div>
<button class="online">online</button>
<button class="offline">offline</button>
<button class="connecting">connecting</button>


Your css file




 .status {
        position: relative;
        height: 50px;
    }

    .online-indicator,
    .offline-indicator,
    .connecting-indicator {
        position: absolute;
        display: none;
    }
    .online-indicator { background-color: #5AE64B;}
    .offline-indicator { background-color: #ccc;}
    .connecting-indicator { background-color: #FFB300;}

JS

$('.online').click(function() {
    $('.status-icon').fadeOut('slow',function(){ 
        $('.online-indicator').fadeIn();
    });

});
$('.offline').click(function() {
    $('.status-icon').fadeOut('slow',function(){ 
        $('.offline-indicator').fadeIn();
    });
});
$('.connecting').click(function() {
    $('.status-icon').fadeOut('slow',function(){ 
        $('.connecting-indicator').fadeIn();
    });
});

http://jsfiddle.net/Cowwando/w4pzwvoh/3/ 问候！如果您需要任何解释，请告诉我！

Answer 5

您可以拥有3个点击事件，也可以拥有一些具有某些HTML5样式属性的事件。提供了几个选项，更改图像的src或使用CSS类。我将在这个答案中尝试并详细说明。

（在jQuery中）

$(function() {
    $("online").on("click", function() {
        $("img").attr("src", "path/to/your/green/image.jpg");
    });
    $("connecting").on("click", function() {
        $("img").attr("src", "path/to/your/grey/image.jpg");
    });
    $("other").on("click", function() {
        $("img").attr("src", "path/to/your/orange/image.jpg");
    });
});

您还可以为

创建3个不同的CSS规则

.online { background: url('path/to/your/green/image.jpg'); }
.connecting { background: url('path/to/your/grey/image.jpg'); }
.other { background: url('path/to/your/orange/image.jpg'); }

然后使用此

而不是在jQuery事件中设置源代码

 $("img").attr("class", "online/connecting/other"); //depending on button click

作为一种高级解决方案，我将它全部绑定到一个jQuery事件中，并使用HTML5数据属性。

<input type="button" data-state="online" value="online" />
<input type="button" data-state="online" value="connecting" />
<input type="button" data-state="online" value="other" />

然后这个jQuery（假设你将根据数据状态属性命名你的图像）

$(function() {
    $("input[type='button']").on("click", function() {
        $("img").attr("src", "path/to/you/images/" + $(this).attr("data-state") + ".jpg");
    });
});

或类似的东西

Answer 6

这是一个仅限CSS的解决方案：http://jsfiddle.net/yns6rotz/。

HTML：

<div class = "buttonGroup">
    <span tabindex = "1">Online</span>
    <span tabindex = "2">Offline</span>
    <span tabindex = "3">Connecting</span>
    <span class = "icon"></span>
</div>

CSS：

.buttonGroup > .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #ccc;
}

.buttonGroup > span:nth-of-type(-n + 3) {
    display: inline-block;
    padding: 0 10px;
    outline: 0;
    font: bold 12px/20px Sans-Serif;
    vertical-align: top;
    cursor: pointer;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #ccc;
}

.buttonGroup > span:first-of-type:focus ~ .icon {
    background-color: green;
}

.buttonGroup > span:nth-of-type(2):focus ~ .icon {
    background-color: gray;
}

.buttonGroup > span:nth-of-type(3):focus ~ .icon {
    background-color: orange;
}

这是一个持久按钮状态的解决方案：http://jsfiddle.net/nshvuf44/。

HTML：

<div class = "buttonGroup">
    <label for = "online">Online</label>
    <label for = "offline">Offline</label>
    <label for = "connecting">Connecting</label>

    <input type = "radio" id = "online" name = "state" />
    <input type = "radio" id = "offline" name = "state" />
    <input type = "radio" id = "connecting" name = "state" />

    <span class = "icon"></span>
</div>

CSS：

.buttonGroup > .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #ccc;
}

.buttonGroup > label {
    display: inline-block;
    padding: 0 10px;
    outline: 0;
    font: bold 12px/20px Sans-Serif;
    vertical-align: top;
    cursor: pointer;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #ccc;
}

.buttonGroup > input {
    display: none;
}

.buttonGroup > #online:checked ~ .icon {
    background-color: green;
}

.buttonGroup > #offline:checked ~ .icon {
    background-color: gray;
}

.buttonGroup > #connecting:checked ~ .icon {
    background-color: orange;
}

每次按下按钮时更改图像

6 个答案: