link html css und ein Bild

Ich würde gerne Aktionen zu diesem Bild hinzufügen Also, wenn der Benutzer über den roten Punkt schwebt, erscheinen einige Informationen, oder wenn Klicks (modal aus Bootstrap erscheint). Ich benutze Bootstrap, und die Verbreitung von Divs über das Bild gibt kein normales Ergebnis. Ich möchte, dass es reagiert. Irgendwelche Ideen?link html css und ein Bild

Quelle

2016-08-14 Rahim Rahimli

Vielleicht durch Überprüfung der Koordinaten, auf die sich der Cursor bezieht, relativ zum Bild. Wenn es an der richtigen Stelle ist, dann mache das Popup? –

sollte dies JavaScript erfordern? und eine Menge Arbeit nicht?) –

Sie sind wahrscheinlich besser hinzufügen div-Overlays an bestimmten Punkten, dann den Hover für das Overlay hinzufügen EDIT: jemand bereits mit diesem lol beantwortet –

ich das Problem durch das Löschen rote Punkte in Photoshop gelöst und das Hinzufügen von ihnen dann reiner html mit (I gemacht Tasten mit Hintergrundbild von roten Punkten), dann legte ich diese Punkte zufällig auf der Roadmap

Quelle

2016-09-04 09:00:07

sollte es eine Onhover-Methode für Javascript auf dem HTML-Dom sein.

<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>

Quelle

2016-08-14 19:55:41 COOLGAMETUBE

so, wie dies HTML mit Bild verknüpfen soll?) –

wenn Sie Divs über jeden Punkt hinzufügen und es als "unsichtbare Schaltflächen" verwenden, die Sie schweben können – COOLGAMETUBE

ich weiß es :) das Problem ist, div über rote Punkte zu beheben –

Also, Sie haben ein Problem mit dem divs?

function doHover(id, bool) { 
 
    var obj = document.getElementById("hoverPoint"+id); 
 
    if(bool) { 
 
    obj.style.backgroundColor="green"; 
 
    }else { 
 
    obj.style.backgroundColor="blue"; 
 
    } 
 
}

.hoverPoint { 
 
    position:absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width:100px; 
 
    height:100px; 
 
    display:block; 
 
    background-color: blue; 
 
    opacity: .6; 
 
} 
 

 
#hoverPoint1 { 
 
    top: 130px; 
 
    left: 135px; 
 
}

<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" /> 
 
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>

Quelle

2016-08-14 20:17:56 COOLGAMETUBE

link html css und ein Bild

Antwort

Verwandte Themen