Adding an image inside the cube? - javascript
I have found this script which does what I want, the only thing I want to do is insert an image inside the cube.
But I have no idea how to do it.
I haven't seen this format before:
<rect id="region1" x="50" y="0" width="100" height="100"/>
Not sure how to approach it by adding an <img src=""> inside it.
Need help.
EDIT: it's a script that I found. I don't really need the svg part. All I want is to have an image inside the <div></div> and when I click it will execute the CSS and jQuery script...
Here's the code I'm using:
$("rect").click(onRectClick);
$("#sel1").change(onSelectChange);
function onRectClick(evt)
{
// Get the id of the region we clicked on
var regionId = evt.target.id;
// Update the dropdown
$("#sel1").val(regionId);
// Highlight the relevant region
setRegion(regionId);
}
function onSelectChange()
{
// Get selected class from dropdown
var selectedRegion = $("#sel1").val();
// Highlight the relevant region
setRegion(selectedRegion);
}
function setRegion(regionId)
{
// Remove "selected" class from current region
$("rect.selected").removeClass("selected");
// Add "selected" class to new region
$('rect#'+regionId).addClass("selected");
// Note: for addClass() etc to work on SVGs, you need jQuery 3+
}
// Init map based on default select value
onSelectChange();
rect {
fill: #ccc;
stroke: #999;
stroke-width: 2;
cursor: pointer;
}
rect:hover {
fill: #888;
}
rect.selected {
fill: #ff7409;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<svg width="300" height="300">
<rect id="region1" x="50" y="0" width="100" height="100"/>
<rect id="region2" x="150" y="0" width="100" height="100"/>
<rect id="region3" x="0" y="100" width="100" height="100"/>
<rect id="region4" x="100" y="100" width="100" height="100"/>
<rect id="region5" x="200" y="100" width="100" height="100"/>
<rect id="region6" x="50" y="200" width="100" height="100"/>
<rect id="region7" x="150" y="200" width="100" height="100"/>
</svg>
<div>
<label for="sel1">Seleziona Area:</label>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
<option value="region6">6 - S. Paolo / S. Osvaldo</option>
<option value="region7">7 - Chiavris / Paderno</option>
</select>
</div>
Try this,
const containers = $('.image-container')
const select = $('#sel1')
// Initialize at position 1
selectElement('region1')
containers.on('click', function() {
selectElement($(this).attr('id'))
select.val($(this).attr('id'))
})
select.change(function() {
selectElement($(this).val())
})
function selectElement(id) {
let others = containers.not($('#'+id))
$('#'+id).addClass("selected")
others.removeClass("selected")
}
#wrapper .image-container {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
}
#wrapper img {
width: 100px;
height: 100px;
object-fit: cover;
}
.image-container.selected::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4)
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="wrapper">
<div id="region1" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
</div>
<div id="region2" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
</div>
<div id="region3" class="image-container">
<img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
</div>
<div id="region4" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
</div>
<div id="region5" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
</div>
</div>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
</select>
Related
show div where its element has attribute title = value
im trying to show a "<div class="bundle--form">" where his child has tag with attr. title = productTrim variable.
here is a demo:
$(function() {
$('.icon--drop').click(function (event) {
// The URL changed...
console.log("url changed");
var productName = $('.super-color-variant[style="display: block;"] .product--title').text();
var productTrim = $.trim(productName);
var BundleName = $(`.bundle--product-name a[title='${productTrim}']`).attr('title');
console.log(productTrim);
console.log("and");
console.log(BundleName);
if(productTrim === BundleName){
$('.bundle--form').hide()
$(".bundle--form").find(`div a[title='${productTrim}']`).show();
console.log("are same")
}else{
$('.bundle--form').hide()
console.log("are not same")
}
});
});
svg#Ebene_1{
width: 50px;
height: 50px;
}
.demo{
padding: 10px;
border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="super-color-variant" data-super-variant="magenta" style="display: block;">
<h1 class="product--title" itemprop="name">
Toner magenta ersetzt Lexmark 700X3
</h1>
</div>
<a href="#magenta" class="color-drop-link selected _1" data-super-variant="magenta" title="black">
<i class="icon--drop magenta">
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.39 130">
<path class="cls-1" d="M75.67,41.8,58.87,10.42,42.06,41.8C33.2,58.43,24.75,70.71,24.75,86.24c0,20.13,17.65,33.35,34.12,33.35S93,106.32,93,86.24C93,70.71,84.54,58.43,75.67,41.8Z"></path>
</svg>
</i>
</a>
<div class="bundle--form">
<div class="demo">
<div class="bundle--product-name">
1x Toner magenta ersetzt Lexmark 700X3
</div>
</div>
</div>
<div class="bundle--form">
<div class="demo">
<div class="bundle--product-name">
1x original yellow ersetzt Lexmark 700X7
</div>
</div>
</div>
basically, when you click on the color drop, only the bundle--form that matches the title should be shown. how can I do that? I've tried many ways, can anyone link an article or give a suggestion? jq or js no problem, thanks :).
You tell jQuery to show the a tag within a .bundle--form. But the .bundle--form is not shown and thus the browser will not render anything in it.
I believe you meant to show the .bundle-form where the a tag with that specific title is in.
I changed this:
$(".bundle--form").find(`div a[title='${productTrim}']`).show();
to this:
$(`.bundle--form a[title='${productTrim}']`).closest('.bundle--form').show();
jQuery uses the recently selected element. What you call show on was the a tag, when in fact you probably wanted the closest .bundle--form.
See updated snippet below.
$(function() {
$('.icon--drop').click(function (event) {
// The URL changed...
console.log("url changed");
var productName = $('.super-color-variant[style="display: block;"] .product--title').text();
var productTrim = $.trim(productName);
var BundleName = $(`.bundle--product-name a[title='${productTrim}']`).attr('title');
console.log(productTrim, "and", BundleName);
if(productTrim === BundleName){
$('.bundle--form').hide()
$(`.bundle--form a[title='${productTrim}']`).closest('.bundle--form').show();
console.log("are same")
}else{
$('.bundle--form').hide()
console.log("are not same")
}
});
});
svg#Ebene_1{
width: 50px;
height: 50px;
}
.demo{
padding: 10px;
border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="super-color-variant" data-super-variant="magenta" style="display: block;">
<h1 class="product--title" itemprop="name">
Toner magenta ersetzt Lexmark 700X3
</h1>
</div>
<a href="#magenta" class="color-drop-link selected _1" data-super-variant="magenta" title="black">
<i class="icon--drop magenta">
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.39 130">
<path class="cls-1" d="M75.67,41.8,58.87,10.42,42.06,41.8C33.2,58.43,24.75,70.71,24.75,86.24c0,20.13,17.65,33.35,34.12,33.35S93,106.32,93,86.24C93,70.71,84.54,58.43,75.67,41.8Z"></path>
</svg>
</i>
</a>
<div class="bundle--form">
<div class="demo">
<div class="bundle--product-name">
1x Toner magenta ersetzt Lexmark 700X3
</div>
</div>
</div>
<div class="bundle--form">
<div class="demo">
<div class="bundle--product-name">
1x original yellow ersetzt Lexmark 700X7
</div>
</div>
</div>
Relatively scale Svg inside fixed Div (CSS and JS)
I have two svg graphics which do not have the same size, but the content does relatively suit each other, see the following example: The Goal I search for a solution which preserves the ratio between both svg´s while having both images in a "fixed frame". The Problem The following example shows how the left person "gets bigger" since the svg is smaller than the svg from the right person and can grow more inside the fxied frame (max-width and max-height 100%) like this I can´t change the svg files (i.e. the viewbox) since they are loaded on a canvas and working right there. This two SVGs are just an example, there are a lot of other SVGs with different sizes and ratios between each other. JsFiddle I prepared a Fiddle to play around and try possible solutions: https://jsfiddle.net/e6hs4w3s/
I know you're looking to strictly use CSS, but as a (potential) fallback you could use JavaScript to resize the smaller svg, based on the ratio of the larger svg's computed height / natural height.
This is the line that resizes the smaller img based on the desired proportions: shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];
if (img1.naturalHeight > img2.naturalHeight) {
tallImg = img1;
shortImg = img2;
} else {
tallImg = img2;
shortImg = img1;
}
shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
.Box {
display: inline-flex;
align-items: flex-end;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
vertical-align: bottom;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />
<hr />
<div class="Box">
<img class="Tile" src="http://imgh.us/lay.svg" />
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>
Use a more appropriate viewBox for the sitting person. Make the viewBox y and height components match the ones in the standing SVG.
In your case the "standing" SVG has a viewBox y=0 and height=367. The "sitting" SVG has a height=269.
If you make the sitting one have a viewBox height of 367 also, the proportions of the two will match. However you'll need to change the y component of its viewBox as well - otherwise it will be at the top of the SVG instead of the bottom. So we set the y component to (269-367) to correct that.
viewBox="0 -98 230.31494 367"
.Box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<div class="Box">
<svg
class="Tile"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Ebene_1"
x="0px"
y="0px"
width="6.499999cm"
height="7.5915117cm"
viewBox="0 -98 230.31494 367"
enable-background="new 0 0 283.46 283.46"
xml:space="preserve"
inkscape:version="0.92.0 r15299"
sodipodi:docname="zugewandt_nach_unten.svg"><metadata
id="metadata27"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs25" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="657"
id="namedview23"
showgrid="false"
units="cm"
inkscape:zoom="1"
inkscape:cx="51.890866"
inkscape:cy="140.27666"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Ebene_1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:pagecheckerboard="true" />
<g
id="g3"
transform="matrix(-1.1825709,0,0,1.1825709,230.31821,-66.220423)">
<path
d="m 154.409,92.382 c 2.378,4.021 6.902,5.898 12.702,6.499 -4.37,4.104 -14.615,1.891 -12.702,-6.499 z"
id="path5"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 95.329,181.592 c -1.929,-2.74 -7.111,-5.074 -9.452,-8.567 1.326,-3.302 3.538,-5.093 5.612,-8.271 2.503,1.253 3.837,4.155 6.204,5.907 2.975,2.204 7.198,4.248 10.93,6.204 7.161,3.754 14.226,6.105 21.859,10.93 -1.638,3.984 -5.125,8.652 -7.976,12.406 -1.792,-0.078 -1.973,-1.018 -3.25,-2.362 1.052,4.188 3.411,6.844 6.203,9.452 3.106,2.9 13.093,7.684 13.884,12.702 0.667,4.229 -3.668,8.383 -6.499,9.747 -4.851,2.338 -11.467,2.618 -18.314,3.545 -17.772,2.408 -39.861,6.749 -54.353,10.634 -0.07,-3.613 0.012,-7.077 0.295,-10.338 7.509,-3.136 14.493,-7.042 22.154,-10.634 7.693,-3.607 16.185,-5.73 26.29,-6.5 3.629,-0.275 7.491,1.302 10.043,-0.295 -5.255,-1.816 -13.221,-2.709 -20.382,-1.772 -3.784,0.495 -9.981,4.586 -12.875,4.756 -4.165,0.245 -7.423,-6.422 -10.756,-8.891 -4.354,-3.225 -7.647,-6.24 -10.93,-9.749 -0.243,-7.731 0.063,-16.014 -3.249,-20.677 -0.934,4.94 0.733,11.296 0.295,19.2 -0.528,9.541 -3.121,20.377 -3.841,32.789 -0.318,5.496 -0.798,10.925 -0.295,17.428 0.388,4.998 2.265,13.149 1.182,16.247 -0.645,1.846 -6.201,5.688 -7.976,7.09 -4.705,3.72 -7.906,7.009 -13.588,7.68 -2.893,0.343 -6.303,-0.408 -6.794,-1.772 -0.258,-0.717 1.764,-2.797 3.25,-4.431 1.744,-1.918 2.818,-3.332 3.544,-4.431 1.965,-2.972 4.74,-6.738 6.203,-9.749 1.402,-2.883 0.811,-4.989 0.591,-8.861 -0.31,-5.44 0.422,-12.134 0,-17.428 -1.251,-15.694 -3.658,-33.514 -4.431,-51.103 -0.344,-7.83 -0.436,-15.952 0.591,-22.451 0.845,-5.349 4.916,-10.429 12.702,-7.975 2.738,0.862 8.226,5.452 10.93,7.384 10.395,7.428 19.205,17.48 32.199,22.156 z"
id="path7"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 165.633,186.908 c 1.453,8.804 -3.142,22.188 1.479,27.472 2.745,3.142 9.129,6.53 13.904,8.053 3.712,1.183 9.56,1.866 12.472,4.543 -3.165,2.398 -10.156,0.245 -14.266,-0.483 -5.991,-1.064 -12.716,-2.966 -18.609,-0.887 -4.011,1.414 -5.568,5.899 -10.34,5.612 -2.66,-0.501 1.098,-2.64 1.772,-4.135 4.068,-9.019 3.812,-23.248 2.067,-34.857 5.049,-0.566 8.242,-2.986 11.521,-5.318 z"
id="path9"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 40.091,237.219 c 0.182,4.248 -0.608,7.899 0,11.723 -9.146,1.374 -19.969,5.869 -29.54,6.499 -2.362,0.154 -5.277,0.199 -6.499,-1.772 0.896,-3.576 2.178,-3.695 4.333,-4.424 8.607,-2.91 15.533,-9.286 22.549,-12.709 2.045,-0.999 6.426,0.218 9.157,0.683 z"
id="path11"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 169.117,105.585 c -3.789,-2.385 -8.862,-2.115 -13.587,-0.295 -1.44,0.555 -2.468,1.662 -3.841,1.772 -3.503,0.283 -5.502,-0.698 -8.567,-2.068 0.831,2.518 3.815,2.881 5.908,4.136 -0.84,2.311 -1.232,0.879 -1.863,4.271 1.753,-0.043 2.258,-1.242 3.92,-2.761 2.919,-2.67 11.884,-7.785 16.258,-2.101 0.66,0.857 1.29,2.776 1.479,4.135 0.885,6.416 0.351,14.986 0,22.746 -0.697,15.317 -0.622,31.636 -2.66,41.946 -3.868,0.563 -6.138,2.725 -10.93,2.363 -1.492,-14.936 1.168,-36.355 -6.498,-46.081 -0.777,4.567 2.566,9.542 2.067,14.474 -0.373,3.697 -3.416,7.464 -5.021,10.93 -2.746,5.929 -4.522,12.689 -7.975,16.838 -5.693,-2.095 -11.339,-5.942 -16.542,-9.748 -2.36,-1.727 -7.439,-6.067 -7.976,-9.159 -0.516,-2.975 1.074,-7.574 2.068,-11.224 1.699,-6.246 3.776,-11.365 3.249,-19.201 -2.357,1.513 -2.405,4.688 -2.954,7.09 -0.567,2.476 -1.357,5.154 -2.068,7.679 -1.388,4.935 -5.411,13.406 -2.659,18.316 2.058,3.672 9.207,8.246 12.997,10.633 5.443,3.428 9.08,7.222 14.18,9.453 4.87,2.132 10.908,-0.73 15.746,-1.123 1.674,0.292 0.589,1.919 -0.268,3.207 6.101,1.975 15.711,-6.053 15.537,-1.493 -2.353,9.6 -23.563,12.656 -34.561,6.203 -8.282,-4.858 -18.467,-9.137 -26.585,-13.884 -2.803,-1.639 -5.919,-3.115 -8.271,-5.021 -2.07,-1.676 -6.064,-6.029 -6.499,-8.271 -0.8,-4.127 1.95,-10.061 3.249,-15.064 2.158,-8.304 3.753,-13.701 6.794,-20.382 0.924,-2.03 2.024,-4.664 2.954,-5.612 4.713,-4.809 18.369,-4.518 26.29,-6.794 2.859,-0.822 5.622,-2.228 6.794,-5.318 2.344,-6.177 -1.19,-12.252 -1.772,-17.723 -0.861,-8.079 1.603,-15.854 5.316,-20.383 6.295,-7.677 20.574,-12.459 31.312,-6.499 4.378,2.43 9.727,7.719 10.854,12.19 2.453,9.716 -4.879,23.439 -10.123,28.416 -1.647,1.565 -3.207,3.117 -5.752,3.407 z m -7.384,-20.677 c 0.229,0.065 0.342,0.247 0.294,0.591 3.046,1.599 5.774,-1.618 3.842,-4.135"
id="path13"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 162.186,55.997 c 0.199,0 0.196,0 0.396,0 6.142,0 11.791,1.277 15.852,4.135 4.196,2.953 8.647,8.275 9.748,13.588 1.209,5.828 -0.092,12.4 -2.067,17.428 -2.923,7.438 -9.257,13.562 -14.474,18.019 2.43,10.587 0.839,24.841 0.296,37.22 -0.468,10.617 -1.039,21.178 -2.659,30.426 1.421,0.761 2.186,0.926 2.363,3.249 0.125,1.649 -0.746,4.244 -2.954,5.907 -0.581,3.304 -0.086,8.046 -0.295,12.997 -0.196,4.656 -0.933,9.164 0.591,12.407 1.837,3.913 12.26,8.465 17.132,10.044 3.475,1.125 7.552,1.816 8.566,5.908 1.064,4.288 -8.802,2.549 -13.884,2.066 -5.919,-0.561 -11.474,-2.473 -15.95,-2.066 -3.359,0.304 -5.824,3.119 -8.862,5.021 -2.046,1.282 -8.383,3.896 -9.748,0 -0.917,-2.614 1.959,-5.31 2.954,-7.975 3.302,-8.851 3.733,-19.401 2.658,-31.607 -7.682,1.293 -13.458,-1.375 -18.905,-3.25 -2.427,4.663 -5.369,8.811 -8.271,12.997 4.168,6.246 16.768,9.067 17.725,18.02 1.525,14.28 -15.868,14.926 -27.472,16.542 -18.028,2.513 -39.852,6.658 -54.648,10.043 -0.06,3.664 0.596,6.441 0.886,9.158 0.283,2.663 1.301,6.291 0.591,9.452 -0.671,2.981 -5.512,5.316 -8.862,7.976 -5.566,4.418 -9.548,9.458 -17.428,9.748 -4.32,0.159 -10.468,-1.677 -10.634,-4.727 -0.109,-1.997 2.922,-4.173 4.431,-5.611 5.661,-5.403 11.798,-15.013 10.93,-20.088 -2.639,-0.34 -6,1.328 -9.453,2.068 -3.363,0.721 -7.076,1.395 -10.635,2.068 -5.167,0.977 -19.593,3.505 -20.086,-3.25 -0.5,-6.841 11.431,-7.824 16.542,-10.93 6.697,-4.069 12.635,-14.058 23.534,-8.613 -2.043,-15.677 -4.313,-36.206 -5.428,-54.158 -0.33,-5.322 -0.356,-10.632 0.209,-15.508 1.092,-9.412 6.831,-18.869 18.314,-15.656 2.347,0.657 5.177,3.024 7.681,4.726 7.516,5.112 14.579,11.641 21.563,16.247 3.45,-3.143 5.502,-4.255 7.208,-8.248 -1.796,-4.543 -0.257,-7.046 0.159,-8.922 1.07,-4.835 2.708,-6.9 4.154,-11.779 1.529,-5.16 2.977,-9.229 4.431,-14.178 1.398,-4.757 3.601,-8.829 7.09,-11.521 3.581,-2.763 8.66,-3.413 14.179,-4.431 3.427,-0.632 10.732,-0.849 13.588,-2.363 6.498,-3.447 1.389,-14.053 0.886,-20.677 -0.491,-6.473 0.888,-12.902 3.25,-17.429 4.873,-9.345 13.085,-13.365 24.808,-14.473 z m 12.683,46.181 c 5.244,-4.976 12.22,-18.445 9.769,-28.162 -1.13,-4.471 -5.963,-9.977 -10.341,-12.407 -10.737,-5.961 -25.016,-1.179 -31.311,6.499 -3.713,4.529 -6.177,12.304 -5.317,20.383 0.583,5.471 4.116,11.546 1.772,17.723 -1.172,3.09 -3.935,4.496 -6.794,5.317 -7.92,2.277 -21.577,1.985 -26.29,6.794 -0.93,0.948 -2.03,3.583 -2.954,5.612 -3.042,6.681 -4.637,12.077 -6.794,20.382 -1.299,5.003 -4.049,10.938 -3.249,15.065 0.435,2.242 4.429,6.594 6.499,8.271 2.352,1.905 5.468,3.382 8.271,5.021 8.118,4.748 18.191,9.22 26.585,13.884 10.919,6.067 31.195,3.359 34.562,-6.202 -0.572,-3.586 -10.684,4.357 -16.784,2.382 -0.675,-1.012 2.209,-3.449 0.535,-3.741 -4.839,0.394 -9.897,2.899 -14.767,0.769 -5.1,-2.233 -8.736,-6.025 -14.18,-9.454 -3.791,-2.386 -10.939,-6.961 -12.997,-10.634 -2.752,-4.91 1.271,-13.38 2.659,-18.314 0.71,-2.526 1.501,-5.203 2.068,-7.68 0.549,-2.401 0.597,-5.576 2.954,-7.089 0.527,7.834 -1.55,12.955 -3.249,19.201 -0.994,3.65 -2.584,8.248 -2.068,11.225 0.536,3.091 5.615,7.431 7.976,9.157 5.203,3.807 11.206,7.031 16.542,9.748 3.453,-4.147 5.229,-10.907 7.975,-16.838 1.605,-3.466 4.117,-7.768 5.022,-10.929 -0.897,-4.338 -2.846,-9.908 -2.068,-14.475 7.666,9.726 5.006,31.145 6.499,46.082 4.791,0.36 7.061,-1.801 10.93,-2.363 2.037,-10.31 1.962,-26.63 2.659,-41.947 0.351,-7.759 0.886,-16.33 0,-22.745 -0.188,-1.359 -0.818,-3.278 -1.478,-4.135 -4.374,-5.684 -12.805,-0.391 -15.724,2.278 -1.662,1.52 -4.009,3.831 -5.545,4.811 -0.104,-3.254 1.893,-4.276 2.954,-6.499 -2.093,-1.254 -5.077,-1.618 -5.908,-4.136 3.275,0.366 5.063,2.351 8.566,2.068 1.374,-0.11 2.4,-1.218 3.842,-1.772 4.724,-1.819 9.797,-2.09 13.587,0.295 2.297,-0.416 3.945,-1.88 5.592,-3.445 z M 62.935,159.385 c -2.704,-1.933 -8.192,-6.522 -10.93,-7.385 -7.786,-2.454 -11.857,2.627 -12.702,7.976 -1.027,6.499 -0.935,14.62 -0.591,22.45 0.773,17.589 3.179,35.409 4.431,51.103 0.422,5.295 -0.31,11.988 0,17.429 0.22,3.872 0.812,5.979 -0.591,8.861 -1.463,3.011 -4.238,6.776 -6.203,9.749 -0.727,1.098 -1.8,2.513 -3.544,4.43 -1.485,1.634 -3.507,3.714 -3.25,4.432 0.491,1.364 3.901,2.114 6.794,1.772 5.682,-0.672 8.883,-3.961 13.588,-7.68 1.775,-1.403 7.331,-5.245 7.976,-7.09 1.083,-3.099 -0.794,-11.249 -1.182,-16.247 -0.503,-6.503 -0.023,-11.933 0.295,-17.429 0.72,-12.411 3.313,-23.248 3.841,-32.789 0.438,-7.904 -1.229,-14.259 -0.295,-19.199 3.312,4.662 3.005,12.944 3.249,20.677 3.283,3.508 6.576,6.524 10.93,9.748 3.333,2.469 7.104,7.11 11.469,7.912 2.883,-0.617 8.379,-3.282 12.163,-3.777 7.162,-0.936 15.127,-0.043 20.382,1.772 -2.553,1.598 -6.414,0.021 -10.043,0.296 -10.105,0.77 -18.597,2.893 -26.29,6.499 -7.661,3.592 -14.645,7.498 -22.154,10.634 -0.284,3.262 -0.366,6.725 -0.295,10.339 14.491,-3.886 36.58,-8.226 54.353,-10.634 6.847,-0.927 13.463,-1.207 18.314,-3.545 2.831,-1.364 7.166,-5.52 6.499,-9.748 -0.791,-5.018 -10.777,-9.801 -13.883,-12.702 -2.792,-2.608 -5.151,-5.264 -6.203,-9.452 1.474,0.596 1.829,1.089 3.25,2.362 2.851,-3.754 6.337,-8.422 7.976,-12.406 -8.059,-3.791 -14.698,-7.176 -21.859,-10.929 -3.732,-1.957 -7.955,-4.001 -10.93,-6.204 -2.366,-1.753 -4.279,-3.636 -6.203,-5.907 -1.688,3.518 -4.286,4.969 -5.612,8.271 2.341,3.493 7.523,5.827 9.452,8.567 -12.999,-4.677 -21.809,-14.729 -32.202,-22.156 z m 77.983,18.314 c 3.315,0.798 7.125,-0.198 10.614,-0.698 -0.266,-7.613 0.624,-15.659 -0.57,-22.343 -3.257,7.772 -5.556,16.5 -10.044,23.041 z m 12.998,14.475 c 1.744,11.608 1.998,25.839 -2.068,34.856 -0.675,1.496 -3.701,3.508 -1.772,4.135 4.772,0.287 6.328,-4.197 10.338,-5.611 5.896,-2.08 12.621,-0.178 18.61,0.886 4.111,0.729 12.236,3.119 12.407,0 0.196,-2.137 -6.703,-2.824 -10.415,-4.007 -4.775,-1.522 -11.355,-4.963 -14.103,-8.105 -4.618,-5.282 -1.13,-18.618 -1.477,-27.471 -3.282,2.331 -6.473,4.75 -11.52,5.317 z m -93.345,37.809 c 7.416,-2.923 15.059,-5.618 20.973,-10.043 -7.239,-4.085 -12.655,-9.992 -18.019,-15.951 -1.016,8.634 -2.797,16.502 -2.954,25.994 z m -29.835,6.499 c -7.016,3.423 -13.585,10.512 -22.192,13.422 -2.154,0.729 -3.793,0.135 -4.689,3.711 1.222,1.973 4.137,1.928 6.499,1.773 9.57,-0.63 20.393,-5.126 29.54,-6.5 0.225,-3.832 0.379,-7.422 0.197,-11.67 -2.731,-0.464 -7.309,-1.734 -9.355,-0.736 z"
id="path15"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 166.224,81.453 c 1.936,2.518 -0.793,5.734 -3.839,4.135 0.048,-0.344 -0.065,-0.526 -0.297,-0.591 0.29,-2.27 1.403,-3.718 4.136,-3.544 z"
id="path17"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 158.249,85.588 c -0.214,1.265 -0.908,2.045 -1.773,2.659 0.62,7.552 8.587,7.759 16.247,8.271 -3.025,6.303 -16.426,9.722 -19.792,1.772 -1.105,-2.613 -0.167,-5.767 0.297,-9.157 -1.041,-1.271 -5.233,-0.809 -4.728,-2.659 2.581,0.588 7.026,0.102 9.749,-0.886 z m 9.672,12.849 c -5.8,-0.6 -11.134,-2.033 -13.512,-6.054 -1.913,8.389 7.679,11.042 13.512,6.054 z"
id="path19"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 175.381,86.77 c 1.271,2.657 -2.075,5.457 -4.431,3.544 0.048,-0.344 -0.064,-0.526 -0.294,-0.59 0.035,-2.445 2.478,-4.557 4.725,-2.954 z"
id="path21"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</g>
</svg>
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>
How about using a simple percentage based margins and sizes to scale both svg images accordingly within the fixed containers?
Here's what I came up with:
<div class="box">
<img class="tile left" src="https://imgh.us/lay.svg" />
</div>
<div class="box">
<img class="tile right" src="https://imgh.us/heart_23.svg" />
</div>
And the CSS:
.left {
margin-top: 20%;
margin-left: 25%;
height: 80%;
width: 75%;
}
.right {
height: 100%;
margin-right: 25%;
width: 75%;
}
.box {
float: left;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
Of course, you can change the percentages to your liking. Cheers!
How to set timeout function for Rollover
Below is my code, this is basic question can anyone help to fix this,
I want image to appear after sometime when user hover on it. say for eg 3 sec
function MouseRollover(MyImage) {
MyImage.src = "http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg";
}
function MouseOut(MyImage) {
MyImage.src = "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg";
}
<div align="center">
<!--The rollover image displays here.-->
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg" border="0px" width="" height="" onMouseOver="setTimeout(MouseRollover(this), 3000);" onMouseOut="MouseOut(this)" />
</div>
You can set the setTimeout inside the function so that it does not change the image source for 3 seconds like below. Although in this example if the user stops hovering before 3 seconds, then the onMouseOut will finish firing before the onMouseOver, which leaves the user with the hovered image.
<html>
<head>
<script language="javascript">
function MouseRollover(MyImage) {
setTimeout(function(){
MyImage.src = "http://media.giphy.com/media/DOs3KXoWEpTxK/giphy-tumblr.gif";
}, 3000);
}
function MouseOut(MyImage) {
MyImage.src = "http://plusquotes.com/images/quotes-img/cool_cat.jpg";
}
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="http://plusquotes.com/images/quotes-img/cool_cat.jpg"
border="0px"
width="300px" height="auto"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>
Ok, below is a script that will change the image 3 seconds after mousing over. I slightly modified your code as it's a lot easier to work with scripts when it's not embedded in your HTML. Hope this helps.
const universe = 'http://www.blirk.net/wallpapers/800x600/universe-wallpaper-2.jpg';
const rectangle = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg';
const img = document.querySelector('img');
img.addEventListener('mouseover', (e) => {
setTimeout(()=>{
img.src = universe;
}, 3000);
})
<html>
<head>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
</div>
</body>
</html>
Here is an example, mouse over wait 3 seconds.
Also resets when mouse leaves..
var mrSmiley = document.querySelector('.img');
var timer;
mrSmiley.onmouseenter = function () {
timer = setTimeout(function () {
mrSmiley.classList.add('img-3sec');
}, 3000);
}
mrSmiley.onmouseleave = function () {
clearTimeout(timer);
mrSmiley.classList.remove('img-3sec');
}
.img {
cursor: pointer;
width: 128px;
height: 128px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient gradientUnits="userSpaceOnUse" y2="537.87" x2="481.51" y1="547.94" x1="481.6" id="0"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="matrix(.43294 0 0 .43294-205.62-231.99)"><circle cx="481.66" cy="542.55" r="5.5" fill="url(#0)"/><g transform="translate(-7.44.975)"><g fill="#414141"><circle r=".6" cy="542.3" cx="485.13"/><circle r=".6" cy="542.3" cx="491.15"/></g><path d="m486.66 544.18h2.912" fill="none" fill-rule="evenodd" stroke="#414141" stroke-linecap="round" stroke-width=".275"/></g></g></svg>');
}
.img-3sec {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 5.8208332 5.8208335"><defs><linearGradient id="0" x1="488.2" y1="547.74" x2="488.11" y2="537.68" gradientUnits="userSpaceOnUse"><stop stop-color="#ffeb96"/><stop offset="1" stop-color="#fff1b7"/></linearGradient></defs><g transform="translate(0-291.18)"><g transform="matrix(.43294 0 0 .43294-209.18 68.12)"><g transform="translate(1.612-20.413)"><circle r="5.5" cy="542.35" cx="488.27" fill="url(#0)"/><g fill="#414141"><circle cx="485.18" cy="542.3" r=".6"/><circle cx="491.35" cy="542.3" r=".6"/></g></g><g transform="translate(-6.818-.4)" fill="#f7aa86"><path d="m499.05 523.96c0 .07.783.139.779.207-.11 1.575-1.461 2.821-3.116 2.827-1.648.006-3.01-1.222-3.135-2.788-.006-.074.305-.15.304-.225l2.82-.022z"/><path d="m493.66 523.64h6.077c.049 0 .088.039.088.088v.385c0 .049-.001.206-.001.206h-6.234c0 0-.001-.157-.001-.206v-.385c0-.049.039-.088.088-.088"/></g></g><path d="m2.113 294.66h1.594v.769.773c0 .426-.343.769-.769.769h-.057c-.426 0-.769-.343-.769-.769v-.773z" fill="#eb8671" fill-rule="evenodd"/></g></svg>');
}
Mouse over Mr Happy for 3 seconds..
<div class="img">
</div>
Hover on svg for affecting the other element property doesn't work
HTML:
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div class="theContainer">bg-color</div>
</div>
CSS:
.myPoint:hover + .theContainer {
background-color: black;
}
Problem: When i am hovering on the blue svg circle the background-color should be displayed on the text, but with svg it doesn't work. What is the problem? what do i need to do?
The demo: http://jsfiddle.net/wy6y66ox/
This has nothing to do with SVG per se. + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. Because .myPoint is not a sibling of .theContainer your selector will not work. You would need javascript in this instance.
Paulie_D is right.You have to use Javascript.
HTML
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle id="svgid" class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div id="divcolor" class="theContainer">bg-color</div>
</div>
JS
var svg = document.getElementById( 'svgid' );
var div = document.getElementById( 'divcolor' );
svg.onmouseover = function() {
div.style.backgroundColor = 'blue';
};
svg.onmouseout = function() {
div.style.backgroundColor = 'transparent';
};
Demo Here
How to add description underneath photo on mouse over? (photo gallery)
I am making a simple photo gallery and currently when the user hovers over a thumbnail, an enlarged photo is shown below it.
I would like also that when the user overs over a thumbnail, I would like some text to be displayed inside the white text box. Every thumbnail should have a different description. I would like a JavaScript code help as I am not familiar with j query.
Here is my code, Help appreciated!
<!DOCTYPE html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin-top: 100px;
}
input {
height: 40px;
word-wrap: break-word;
}
.thumbnails img {
height: 100px;
border: 4px solid #151515;
padding: 1px;
margin: 0 10px 10px 0;
margin-top: 40px;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #151515;
padding: 1px;
width: 800px;
}
a:hover + input {
display: block;
}
</style>
</head>
<body>
<body bgcolor="#CCCCCC">
<form name="bgcolorForm" >
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">Set background color
<option value="c8e4f8">Blue
<option value="CCCCCC">Grey
<option value="FFFFFF">White
<option value="FBFBEF">Cream
</select>
</form>
<br>
<form id="font_form">
<select id ="font" onChange="setFont()">
<option value="choose">Set font style
<option style="font-family: 'Verdana'">Verdana</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
</form>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>
<input style="width:800px" id="Text" type="text" float="right" value="Text"/>
<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg" alt="Image Not Loaded"/>
</div></br>
<script type="text/javascript">
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onmouseover = function () {
document.getElementById('preview').src = this.src;
}
}
function setFont()
{
var selectFont = document.getElementById("font");
if (selectFont) {
var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
if (selectFontValue == "Verdana") {
document.getElementById("Text").style.font = "20px Verdana, sans-serif";
}
else if (selectFontValue == "Arial") {
document.getElementById("Text").style.font = "20px Arial,sans-serif";
}
else if (selectFontValue == "Times New Roman") {
document.getElementById("Text").style.font = "20px Times New Roman,serif";
}
else {
document.getElementById("Verdana").style.font = "20px Verdana, sans-serif";
}
}
}
</script>
</body>
</html>
You should use data attributes and basicly this is how it can work:
<img src="http://lorempixel.com/100/100/nature/6"
data-full="http://lorempixel.com/300/300/nature/6"
data-small="http://lorempixel.com/100/100/nature/6"
onmouseover="this.src=this.getAttribute('data-full');"
onmouseout="this.src=this.getAttribute('data-small')"
/>
http://codepen.io/anon/pen/nubmo/