Fatal编程技术网
  • javascript/
  • Javascript 让我的图像映射在HTML和JQuery之间工作

Javascript 让我的图像映射在HTML和JQuery之间工作

javascript jquery html

Javascript 让我的图像映射在HTML和JQuery之间工作,javascript,jquery,html,imagemap,Javascript,Jquery,Html,Imagemap,我遇到的问题是如何从Home.html获取图像映射 我有一个交互式菜单，在单击第一个栏中的项目后显示第二个栏，在单击第二个栏后显示图像。我想使用一个图像地图来显示小信息弹出窗口时，某些地区的不同图像悬停。当图像映射在一个独立的html文件中时，我可以让hover函数工作。但是，当我想从Home.html实现它时，我并不完全确定如何使它工作。不知道我错过了什么。谢谢你的帮助 Jquery： $(document).ready(function () { $("#bar2").hide(); $

我遇到的问题是如何从Home.html获取图像映射 我有一个交互式菜单，在单击第一个栏中的项目后显示第二个栏，在单击第二个栏后显示图像。我想使用一个图像地图来显示小信息弹出窗口时，某些地区的不同图像悬停。当图像映射在一个独立的html文件中时，我可以让hover函数工作。但是，当我想从Home.html实现它时，我并不完全确定如何使它工作。不知道我错过了什么。谢谢你的帮助

Jquery：

$(document).ready(function () {

$("#bar2").hide();

$(document).on("click", ".subItem", function () { //we use $.on instead of $.bind here because the .subItem class elements we are binding 'click' events to do not exist yet in the DOM, and won't for an indeterminate amount of time since they require user action to appear.
    var tid = $(this).attr("id");
    var type = tid.split("-");
    var subNum = type[1];
    var makeGet = type[0];
    var make = window[makeGet];

    $("#daPic").empty().append("<img src='" + make.models[subNum].image + "' />");
});
function updateBar2(makeObject, IDprefix) {
    $("#bar2").show().empty();
    var cutitoff = "";
    var container = 0;
    for (item in makeObject.models) {
        cutitoff += "<div class='subItem' id='" + IDprefix + "-" + item + "'>" + makeObject.models[item].name + "</div> | ";
        container += 102; //Adjust this if your menu item text grows significantly
    }
    cutitoff = cutitoff.substr(0, cutitoff.length - 2);
    $("#bar2").append(cutitoff).css("width", container + "px");
}
$("#item1").bind("click", function () {
    updateBar2(Honda1, "Honda1");
});
$("#item2").bind("click", function () {
    updateBar2(Honda2, "Honda2");
});
$("#item3").bind("click", function () {
    updateBar2(Honda3, "Honda3");
});
$("#item4").bind("click", function () {
    updateBar2(Honda4, "Honda4");
});

/*AREA MAP STUFF*/
$("area").hover(function () {
    var info = $(this).attr("href");
    //$(".areaPop").hide();
    $(info).show();
}, function () {
    $(".areaPop").hide();
});

area.bind("areaPop", function (e) {
    area.children(".areaPop").show().offset({ left: e.pageX + 10, top: e.pageY + 10 });
    e.preventDefault();
});

});

//would be better to create a parent Products object to enclose all Hondas, etc. so you don't have to link individual objects to their controls above.
var Honda1 = new Object();

Honda1.models = new Array();

Honda1.models = [{ name: "HRX217VKA", image: "images/hrx/hrx217vka.png" }, { name: "HRX217VLA", image: "images/hrx/hrx217vla.png" }, { name: "HRX217VYA", image: "images/hrx/hrx217vya.png" }, { name: "HRX217HYA", image: "images/hrx/hrx217hya.png" }, { name: "HRX217HZA", image: "images/hrx/hrx217hza.png" }];
/*The Honda1 object has a property called models, which is an array (we access inside the []) that contains nested objects (accessed inside the {}s) with properties pertaining to their respective names and image paths. The notation for this is {propertyname : propertyvalue, propertyname : propertyvalue, ad infinitum...}*/

var Honda2 = {}; //correct notation for new object

Honda2.models = []; //correct notation for new array

Honda2.models = [{ name: "HRR216PKA", image: "images/hrr/hrr216pka.png" }, { name: "HRR216VKA", image: "images/hrr/hrr216vka.png" }, { name: "HRR216VYA", image: "images/hrr/hrr216vya.png" }, { name: "HRR216VLA", image: "images/hrr/hrr216vla.png" }];

var Honda3 = {};

Honda3.models = [];

Honda3.models = [{ name: "HRS216PKA", image: "images/hrs/hrs216pka.png" }, { name: "HRS216SKA", image: "images/hrs/hrs216ska.png" }]

var Honda4 = {};

Honda4.models = [];

Honda4.models = [{ name: "HRC216PDA", image: "images/hrc/hrc216pda.png" }, { name: "HRC216HXA", image: "images/hrc/hrc216hxa.png" }]
工作的孤立图像映射：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
 .areaPop{ 
     display: none;
     border: 1px solid black;
     background-color: white;
     padding: 10px;
     width: 175px;
 }
</style>

<script src="../../jquery-1.11.2.min.js"></script>
<script src="../../jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../../main.js"></script>
</head>
<body>
<img src="images/hrc/hrc216hxa.png" class="imagemap" alt="honda HRC216HXA" usemap="#hrc216hxa" />
<map name="hrc216hxa" id="hrc216hxa">
    <area alt="gxv" title="gxv160" href="#gxv160" shape="rect" coords="32,27,285,280" />
    <area alt="cut" title="microcut" href="#microcut" shape="rect" coords="326,45,560,280" />
    <area alt="speedcontrol" title="speedcontol" href="#precisionspeedcontrol" shape="rect" coords="326,280,559,512" />
    <area alt="rotostop" title="rotostop" href="#rotostop" shape="rect" coords="59,307,94,336" />
    <area alt="bag" title="bag" href="#2.5bushelbag" shape="rect" coords="115,476,150,507" />
    <area alt="shaftdrive" title="shaftdrive" href="#shaftdrive" shape="rect" coords="114,661,143,690" />
    <area alt="wheel" title="wheel" href="#9inchnexitewheel" shape="rect" coords="261,728,288,756" />
    <area alt="deck" title="bumper" href="#hrcdeck" shape="rect" coords="349,730,379,760" />
</map>
<br />

<div id="gxv160" class="areaPop">
    The GXV160 will make your dreams come true. Buy now!
</div>
<div id="microcut" class="areaPop">
    The Microcut will cut you. But if you don't buy it, WE will cut you. Choose wisely.
</div>
</body>
</html>


.areaPop{
显示：无；
边框：1px纯黑；
背景色：白色；
填充：10px；
宽度：175px；
}


GXV160将使您的梦想成真。现在就买！
小切口会割伤你的。但如果你不买，我们就砍了你。明智地选择。
这可能是一个愚蠢的问题，但您的两个脚本标记有不同的链接，main.js 404'ing在home.html上吗？或者控制台中是否有其他错误？没有错误。当我打开home.html时，一切都很正常。除了isI获取区域的图像映射在plunkr中的area.bind（'areaPop'）上未定义外，您是否有可能制作一个plunkr或JSFIDLE来显示问题？我会尝试一下JSFIDLE这个链接到我的JSFIDLE工作了吗？我从postimage.org上传了几张图片，但不确定如何在代码中显示这些图片这可能是个愚蠢的问题，但是你的两个脚本标签有不同的链接，main.js 404'ing在home.html上吗？或者控制台中是否有其他错误？没有错误。当我打开home.html时，一切都很正常。除了isI获取区域的图像映射在plunkr中的area.bind（'areaPop'）上未定义外，您是否有可能制作一个plunkr或JSFIDLE来显示问题？我会尝试一下JSFIDLE这个链接到我的JSFIDLE工作了吗？我从postimage.org上传了几张图片，但不确定如何在代码中显示这些图片这可能是个愚蠢的问题，但是你的两个脚本标签有不同的链接，main.js 404'ing在home.html上吗？或者控制台中是否有其他错误？没有错误。当我打开home.html时，一切都很正常。除了isI获取区域的图像映射在plunkr中的area.bind（'areaPop'）上未定义外，您是否有可能制作一个plunkr或JSFIDLE来显示问题？我会尝试一下JSFIDLE这个链接到我的JSFIDLE工作了吗？我从postimage.org上传了几张图片，但不知道如何在代码中显示它们 
body {
background-color: antiquewhite;

}

.subItem{
display:inline-block;
}

#bar1{
display:block;
border: 2px solid black;
background-color: orange;
width: 425px;
}

#bar2 {
display: block;
background-color: orange;
border: 2px solid black;
}

.center{
margin:0 auto;
}

.center2{
margin:0 auto;
width: 550px;
}


.mainBarItem{
display:inline-block;
}

.areaPop{ 
     display: none;
     border: 1px solid black;
     background-color: white;
     padding: 10px;
     width: 175px;
 }

.imagemap{
display: none;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
 .areaPop{ 
     display: none;
     border: 1px solid black;
     background-color: white;
     padding: 10px;
     width: 175px;
 }
</style>

<script src="../../jquery-1.11.2.min.js"></script>
<script src="../../jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../../main.js"></script>
</head>
<body>
<img src="images/hrc/hrc216hxa.png" class="imagemap" alt="honda HRC216HXA" usemap="#hrc216hxa" />
<map name="hrc216hxa" id="hrc216hxa">
    <area alt="gxv" title="gxv160" href="#gxv160" shape="rect" coords="32,27,285,280" />
    <area alt="cut" title="microcut" href="#microcut" shape="rect" coords="326,45,560,280" />
    <area alt="speedcontrol" title="speedcontol" href="#precisionspeedcontrol" shape="rect" coords="326,280,559,512" />
    <area alt="rotostop" title="rotostop" href="#rotostop" shape="rect" coords="59,307,94,336" />
    <area alt="bag" title="bag" href="#2.5bushelbag" shape="rect" coords="115,476,150,507" />
    <area alt="shaftdrive" title="shaftdrive" href="#shaftdrive" shape="rect" coords="114,661,143,690" />
    <area alt="wheel" title="wheel" href="#9inchnexitewheel" shape="rect" coords="261,728,288,756" />
    <area alt="deck" title="bumper" href="#hrcdeck" shape="rect" coords="349,730,379,760" />
</map>
<br />

<div id="gxv160" class="areaPop">
    The GXV160 will make your dreams come true. Buy now!
</div>
<div id="microcut" class="areaPop">
    The Microcut will cut you. But if you don't buy it, WE will cut you. Choose wisely.
</div>
</body>
</html>