1
私はここにいて、これは私の最初の "asking" in stackflowです。これは私のコードです。 主なアイデアは、次のとおりです。Javascript onclick、onmouseout conflict、loop
- アイコンは、デフォルトでは、CSSで「ホバー」のように一緒に働く
- マウスオーバーとマウスアウト、白です。私はCSSでホバリングを使用することはできません。原因イメージは.pngなので、これでjsを使用する必要があります。
- アイコンonclickがアクティブになるようなグレーに変更されました。
私はそれを賢い方法で実際に複雑にしましたが、コードは機能します。もっとシンプルにする方法はありますか？ループを使用して??しかしどうですか？前もって感謝します！
var clickedWalk = false;
var clickedBicycle = false;
var clickedCar = false;
var clickedBus = false;
var clickedParkAndRide = false;
function mouseOverWalk() {
document.getElementById("walk").src="images/Walk-gray.png";
}
function mouseOverBicycle() {
document.getElementById("bicycle").src="images/Biking-gray.png";
}
function mouseOverCar() {
document.getElementById("car").src="images/Car-gray.png";
}
function mouseOverBus() {
document.getElementById("bus").src="images/Bus-gray.png";
}
function mouseOverParkAndRide() {
document.getElementById("park-and-ride").src="images/PPlusBus-gray.png";
}
function mouseOutWalk() {
if (clickedWalk == false) {
document.getElementById("walk").src = "images/Walk.png"; //mouseout works
}
clickedWalk = false;
}
function mouseOutBicycle() {
if (clickedBicycle == false) { //no click
document.getElementById("bicycle").src = "images/Biking.png"; //mouseout works
}
clickedBicycle = false;
}
function mouseOutCar() {
if (clickedCar == false) { //no click
document.getElementById("car").src = "images/Car.png"; //mouseout works
}
clickedCar = false;
}
function mouseOutBus() {
if (clickedBus == false) { //no click
document.getElementById("bus").src = "images/Bus.png"; //mouseout works
}
clickedBus = false;
}
function mouseOutParkAndRide() {
if (clickedParkAndRide == false) { //no click
document.getElementById("park-and-ride").src = "images/PPlusBus.png"; //mouseout works
}
clickedParkAndRide = false;
}
function clickWalk() {
document.getElementById("walk").src="images/Walk-gray.png"; //gray
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white
clickedWalk = true;
}
function clickBicycle() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking-gray.png"; //gray
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white
clickedBicycle = true;
}
function clickCar() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car-gray.png"; //gray
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white
clickedCar = true;
}
function clickBus() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus-gray.png"; //gray
document.getElementById("park-and-ride").src="images/PPlusBus.png"; //white
clickedBus = true;
}
function clickParkAndRide() {
document.getElementById("walk").src="images/Walk.png"; //white
document.getElementById("bicycle").src="images/Biking.png"; //white
document.getElementById("car").src="images/Car.png"; //white
document.getElementById("bus").src="images/Bus.png"; //white
document.getElementById("park-and-ride").src="images/PPlusBus-gray.png"; //gray
clickedParkAndRide = true;
}<div id="modeListBoxSelect">
<ul>
<li onclick="travelMode.byWalk()"><img id="walk" onmouseover="mouseOverWalk()" onmouseout="mouseOutWalk()" onclick="clickWalk()" src="images/Walk.png" alt="walk"</li>
<li onclick="travelMode.byBike()"><img id="bicycle" onmouseover="mouseOverBicycle()" onmouseout="mouseOutBicycle()" onclick="clickBicycle()" src="images/Biking.png" alt="bicycle"</li>
<li onclick="travelMode.byCar()"><img id="car" onmouseover="mouseOverCar()" onmouseout="mouseOutCar()" onclick="clickCar()" src="images/Car.png" alt="car"</li>
<li onclick="travelMode.byBus()"><img id="bus" onmouseover="mouseOverBus()" onmouseout="mouseOutBus()" onclick="clickBus()" src="images/Bus.png" alt="bus"</li>
<li onclick="travelMode.byParkAndRide()"><img id="park-and-ride" onmouseover="mouseOverParkAndRide()" onmouseout="mouseOutParkAndRide()" onclick="clickParkAndRide()" src="images/PPlusBus.png" alt="park-and-ride"</li>
</ul>
</div>