ролловер изображение карта ссылка на другую страницу с фоном GIF - PullRequest
0 голосов
/ 20 января 2019

У меня есть домашняя страница с gif в качестве фона и png, который идет поверх этого. Карты изображений этой ссылки на другие страницы. Я хочу, чтобы эти карты отображали другой png вместо них, когда завис над ним.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home page</title>
<style type="text/css">
.imagefill {
	margin: 0px;
	padding: 0px;
	background-attachment: scroll;
	background-image: url(file:///C|/Users/Owner/Downloads/virtual%20reality%20check-20190119T220656Z-001/virtual%20reality%20check/sunset.gif);
	background-repeat: repeat;
}
</style>
</head>

<body background-image: src ('sunset.gif');
background-size: cover;>
<img src="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/vrc.png" alt="virtual reality check" width="2268" height="3024" usemap="#Map" class="imagefill" object-fit: cover />
<map name="Map">
  <area shape="poly" coords="1372,1053,1375,1084,1375,1125,1380,1153,1387,1189,1392,1231,1399,1266,1410,1306,1419,1326,1446,1350,1467,1356,1488,1366,1506,1377,1513,1383,1531,1398,1549,1414,1564,1420,1579,1434,1593,1467,1611,1492,1618,1515,1630,1531,1636,1554,1645,1581,1648,1608,1650,1642,1654,1663,1651,1684,1651,1704,1654,1728,1656,1753,1665,1731,1674,1701,1680,1678,1696,1653,1710,1629,1720,1590,1722,1560,1726,1539,1726,1519,1726,1492,1726,1470,1726,1446,1725,1420,1723,1384,1717,1353,1711,1315,1696,1284,1689,1260,1672,1218,1659,1195,1639,1158,1612,1135,1576,1096,1557,1075,1525,1054,1513,1044,1501,1033,1468,1032,1467,1056,1401,1053" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Trade.html">
  <area shape="poly" coords="1600,1117,1600,1096,1606,1060,1609,1039,1624,1035,1665,1038,1711,1039,1749,1038,1774,1038,1812,1030,1851,1023,1887,1015,1909,1008,1909,1042,1900,1092,1897,1132,1894,1167,1890,1200,1888,1242,1885,1275,1881,1302,1873,1330,1869,1354,1852,1392,1837,1426,1810,1459,1809,1467,1782,1489,1761,1513,1740,1549,1726,1554,1729,1522,1731,1494,1732,1462,1731,1407,1725,1380,1723,1353,1717,1326,1710,1294,1693,1257,1681,1228,1662,1194,1647,1165,1626,1143,1609,1131" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Fire.html">
  <area shape="poly" coords="1200,1708,1218,1719,1224,1734,1242,1755,1254,1768,1266,1783,1282,1801,1300,1818,1314,1834,1326,1846,1341,1857,1348,1869,1362,1884,1380,1912,1395,1932,1410,1957,1420,1980,1431,2001,1441,2029,1447,2055,1450,2074,1456,2104,1456,2133,1456,2158,1449,2190,1446,2214,1437,2244,1423,2269,1401,2304,1375,2334,1330,2233,1320,2203,1312,2206,1306,2229,1284,2188,1260,2122,1228,2052,1206,1993,1186,1942,1174,1900,1167,1867,1162,1846,1156,1825,1158,1795,1162,1771,1168,1753,1176,1734" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Food.html">
  <area shape="poly" coords="1345,1291,1368,1296,1387,1309,1413,1326,1434,1341,1455,1351,1483,1366,1497,1372,1522,1393,1542,1416,1567,1426,1582,1453,1599,1489,1617,1521,1633,1554,1642,1597,1645,1650,1647,1681,1648,1740,1647,1776,1645,1821,1638,1857,1632,1882,1602,1825,1584,1857,1572,1884,1558,1912,1543,1966,1527,2014,1530,2034,1525,2062,1516,2091,1506,2101,1492,2085,1497,2044,1485,2028,1459,1996,1434,1959,1417,1950,1386,1902,1362,1860,1341,1809,1321,1767,1303,1704,1291,1635,1282,1575,1275,1507,1279,1473,1287,1431,1296,1396,1329,1332" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Art.html">
  <area shape="poly" coords="1692,1167" href="#">
  <area shape="poly" coords="1108,1223,1165,1228,1203,1231,1236,1219,1273,1201,1296,1180,1320,1147,1332,1133,1305,1133,1269,1130,1245,1118,1219,1106,1198,1108,1176,1120,1153,1120,1137,1111,1119,1097,1084,1094,1062,1099,1023,1105,993,1109,958,1111,960,1126,981,1154,1011,1189,1045,1207,1084,1220" href="file:///C|/Users/Owner/Downloads/virtual reality check-20190119T220656Z-001/virtual reality check/Communication.html">
</map>
<!--horizontal menu bar with links to other pages-->
</body>
</html>

1 Ответ

0 голосов
/ 21 января 2019
div {
  background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
  background: url('http:/dummyimage.com100x1eb00eb00//fff');
}

Попробуйте это

...