I don't understand why my image map is not working - maps
What is wrong with the code below? I feel like I have everything set up to make the image map work.
<img class="Europe_Map" src="images/Europe_FinalMap.jpg" width="601" height="574" alt="Europe"
usemap="#europe">
<map name="europe">
<area shape="polygon" href="#" alt="Iceland" coords="724,1490,725,1489,727,1490,726,1489,727,1489,727,1489,728,1489,727,1490,729,1490,728,1490,729,1490,729,1490,729,1491,729,1492,729,1493,729,1494,729,1494,730,1494,730,1494,731,1494,731,1494,732,1494,734,1494,735,1494,736,1493,736,1491,736,1491,737,1491,738,1490,739,1490,740,1491,741,1491,743,1492,747,1492,744,1492,743,1491,743,1491,743,1490,741,1490,741,1488,744,1488,745,1488,744,1486,742,1485,743,1485,743,1485,746,1485,747,1485,747,1485,747,1484,748,1484,745,1482,746,1483,747,1484,748,1483,748,1484,750,1483,751,1483,752,1482,752,1482,753,1482,753,1481,753,1481,751,1480,751,1480,749,1479,753,1479,749,1478,751,1478,753,1478,751,1478,752,1477,752,1477,753,1478,753,1477,753,1477,753,1476,752,1476,752,1476,750,1476,750,1476,749,1477,749,1477,747,1476,749,1476,750,1475,751,1475,750,1475,748,1475,750,1474,749,1474,750,1474,748,1473,747,1472,745,1472,744,1473,744,1473,744,1473,744,1473,745,1472,745,1472,743,1472,744,1471,743,1471,743,1470,745,1471,743,1469,740,1468,742,1469,739,1468,739,1468,739,1467,739,1467,738,1467,737,1467,736,1467,735,1468,735,1467,735,1468,734,1469,734,1468,733,1467,733,1467,732,1467,730,1466,731,1466,78,1465,728,1465,726,1464,725,1464,725,1464,725,1464,723,1463,723,1463,720,1462,720,1462,720,1461,719,1462,719,1461,719,1462,718,1461,719,1463,718,1462,718,1462,718,1462,718,1461,717,1461,713,1461,713,1461,711,1460,712,1461,711,1461,711,1461,709,1460,709,1460,710,1460,709,1459,709,1459,710,1459,708,1458,706,1457,707,1458,705,1458,706,1457,698,1457,696,1457,692,1458,691,1458,691,1458,689,1458,686,1459,687,1459,687,1459,686,1459,686,1459,686,1460,686,1459,685,1461,687,1461,686,1461,686,1462,686,1461,685,1461,683,1461,684,1461,684,1461,684,1461,684,1462,683,1461,680,1462,680,1463,681,1463,679,1463,679,1463,676,1462,674,1462,672,1462,670,1462,668,1462,665,1462,665,1463,666,1463,666,1465,667,1464,669,1464,670,1464,672,1464,672,1465,673,1465,673,1465,672,1466,675,1465,676,1466,675,1466,675,1467,674,1467,677,1468,676,1468,678,1468,679,1468,678,1468,678,1468,675,1468,672,1468,673,1468,675,1468,673,1469,674,1469,676,1470,676,1471,677,1471,679,1471,678,1471,678,1471,677,1471,679,1472,677,1471,677,1472,677,1471,675,1471,674,1471,673,1470,671,1470,672,1470,672,1470,672,1471,671,1471,671,1471,670,1472,671,1472,673,1473,670,1472,671,1473,671,1474,669,1473,668,1473,669,1473,668,1473,668,1473,666,1473,664,1474,662,1474,661,1473,660,1474,661,1474,659,1473,657,1473,656,1474,657,1475,659,1475,662,1475,662,1475,663,1475,664,1475,664,1476,665,1476,665,1475,667,1476,667,1476,667,1476,668,1476,667,1476,669,1477,669,1476,670,1476,673,1476,675,1476,677,1476,677,1477,678,1478,676,1477,673,1477,672,1478,671,1478,672,1478,671,1478,675,1480,676,1480,677,1481,677,1481,678,1481,679,1481,677,1481,677,1482,676,1482,675,1481,673,1482,675,1482,676,1483,674,1482,674,1483,673,1482,673,1482,673,1483,672,1483,672,1483,672,1482,671,1483,671,1482,671,1483,670,1482,669,1482,670,1483,669,1483,668,1482,666,1483,666,1482,664,1482,664,1482,663,1482,661,1481,658,1481,657,1482,654,1482,655,1483,656,1483,657,1483,659,1483,660,1482,658,1483,661,1483,658,1485,661,1485,663,1484,663,1483,664,1484,664,1483,664,1484,666,1484,664,1485,666,1485,666,1485,667,1485,663,1485,661,1487,664,1486,665,1486,667,1486,664,1487,662,1488,664,1488,666,1488,664,1489,665,1489,666,1489,665,1489,666,1490,669,1489,670,1488,669,1487,669,1488,670,1488,670,1488,671,1488,670,1487,671,1488,671,1487,671,1488,672,1489,673,1488,672,1486,673,1487,674,1487,674,1487,674,1487,674,1486,675,1488,674,1488,675,1489,674,1489,673,1489,670,1490,673,1491,674,1491,676,1491,674,1491,675,1492,673,1491,674,1492,673,1492,672,1492,670,1491,669,1492,670,1492,670,1493,670,1493,670,1493,671,1493,672,1493,671,1493,674,1493,675,1493,675,1493,676,1493,676,1493,677,1492,678,1492,677,1491,678,1491,678,1491,679,1491,680,1491,679,1490,680,1490,681,1490,681,1489,682,1488,682,1489,683,1488,684,1488,682,1487,684,1487,683,1487,684,1487,684,1486,682,1485,684,1485,681,1484,680,1485,681,1484,683,1483,682,1483,683,1482,681,1481,684,1480,684,1479,684,1478,684,1479,685,1480,685,1481,686,1480,686,1482,687,1483,689,1484,690,1484,689,1483,690,1483,690,1482,691,1482,691,1483,691,1483,692,1483,692,1482,693,1484,693,1485,693,1486,693,1486,693,1489,695,1489,696,1489,697,1488,697,1487,699,1486,699,1485,700,1485,700,1485,701,1485,701,1485,702,1486,701,1487,701,1487,702,1488,702,1488,703,1489,704,1489,705,1489,705,1489,707,1490,708,1490,708,1490,709,1489,710,1487,712,1487,712,1486,712,1486,712,1486,713,1485,713,1484,713,1484,713,1485,713,1485,713,1487,713,1487,712,1488,712,1490,714,1490,715,1490,716,1489,717,1489,718,1488,718,1487,719,1488,718,1488,720,1488,720,1488,721,1489,721,1489,722,1490,724,1490">
</map>
Related
React scroll Parallax image are jittery on phone
I have tried to use React scroll parallax to get the famous scrolling effect on a couple of images which works perfectly fine in chrome, but in safari and I should say on a small screen looks jittery and give the user a bad experience. here is a sample project created in stackBitz: https://stackblitz.com/edit/react-ybdmbn. please guide me on how I can improve it or what I am doing wrong.
I fix the issue by removing the: speed={-10} property from the <Parallax> tag.
Parallax gets a couple of property which the speed and the translateY are basically the same thing.
<Parallax translateY={[20, -70]} >
<img src="https://picsum.photos/200/300" />
</Parallax>
<Parallax translateY={[30, -90]} >
<img src="https://picsum.photos/seed/picsum/200/300" />
</Parallax>
</div>
<div className={styles.Bottom}>
<Parallax translateY={[20, -80]} >
<img src="https://picsum.photos/200/300?grayscale" />
</Parallax>
<Parallax translateY={[40, -80]} >
<img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
</Parallax>
</div>
Video tag with autoplay does not work in react
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<video src="../public/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
</div>
);
}
export default App;
The above code was created with npx create-react-app, I just happened to add a video tag to it.
Although the page loads the video doesn't play or show up.
at first, I thought maybe the video type is causing this, but as you can see the poster attribute was right there.
So my next suspicion was the video tag.
so I placed it inside an HTML file, placed it in the same folder, and ran it with a live server, and managed to get it working.
Now I could ask you guys why isn't this working for react? now
but I actually managed to find a pseudo solution.
<video src="./One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
I just changed the src attribute.
and it worked.
note- I had the same video in my current directory as well.
but obviously, I don't want to place my resources in the src folder(the current folder).
So my question is: How do I place the video in public/or any other folder which is outside src and make it work?
I don't have enough reputations to comment, so add this as an answer.
Please try this (without . before /One-D.mp4):
<video src="/One-D.mp4" controls muted autoPlay={"autoplay"} poster="./Jacobandbella.jpg" preLoad="auto" loop>video tag is not supported by your browser</video>
Require assets in react's JSX?
A completely noob question, sorry. I'm using dva to generate a project. If I want to create an <img /> tag, I can get the SRC for the asset like this:
<img src={require('../assets/card-cultural.png')} alt="" />
This works properly. However, I need to generate this code:
<picture>
<source srcset="assets/card-cultural.png, assets/card-cultural#2x.png 2x" />
<img src={require('../assets/card-cultural.png')} alt="" />
</picture>
Notice the srcset value on source. How would I generate that string using require?
Joomla editor moves </a> tag
Semi-novice web developer getting increasingly frustrated with my Joomla editor changing my code. I've research online and found Q&As that hint at a similar problem but I can't seem to figure this out. Essentially it's code to create a linked image with a text caption added on hover. Desired code shown below: <ul class="photo-grid"> <li> <figure><a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179"><img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" /><figcaption> <p>Waterproof collars</p> </figcaption></figure></a> <p class="photocaption">FEATURED PRODUCT</p> </li> BUT each time I open the editor the </a> tag has been moved upwards, directly after the <img> tag. Can anyone offer a resolution, I'd really appreciate it. Thanks.
You are closing the <a> tag after </figure> but you have opened it within <figure> so therefore it needs closing inside <figure>. So use: <ul class="photo-grid"> <li> <figure> <a href="index.php?option=com_hikashop&view=category&layout=listing&Itemid=179"> <img src="images/purple-biothane-waterproof-dog-collars.jpg" alt="purple biothane waterproof dog collars" width="280" height="187" /> <figcaption> <p>Waterproof collars</p> </figcaption> </a> </figure> <p class="photocaption">FEATURED PRODUCT</p> </li>
Display images from sdcard in Ionic app
I want to display images from sdcard in my Ionic application , But I got problem to show images with img tag.
View Code For My Application
<ion-content ng-controller="DigitalCatCtrl">
<div>
<img ng-src="{{myimg}}" />
<img src="{{myimgs}}" />
</div>
</ion-content>
Controller Code For My Application
.controller('DigitalCatCtrl', function($scope,$cordovaFile) {
$scope.myimg=cordova.file.externalRootDirectory + ".DigitalCatlog/ic_developmentworks.png";
$scope.myimgs="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png";
});
If I have pass the image path directly to img tag like following way, Image will show.
<img src="file:///storage/sdcard0/.DigitalCatlog/ic_developmentworks.png" />
Please suggest me what I did wrong or any other solution.
use
<img data-ng-src="{{myimgs}}" />
instead
<img src="{{myimgs}}" />