Have you checked out this website made in flash? Do you think we could achieve the same using jquery and css?
Visit here
If you click on any building labeled "Release" You will see a hover animation effect on one of the buildings. I would like to replicate this using jquery and css If not, do you have any suggestions for achieving it?
This will result in something similar to the following:
<map name="image-maps-2015-02-15-031753" id="ImageMapsCom-image-maps-2015-02-15-031753">
<area alt="" href="#" title="" shape="poly" coords="52,99,101,49,172,21,267,21,317,93,302,127,268,63,194,73,129,89,74,115,49,132" style="outline:none;" target="_self" />
</map>
Lastly, you'll need some JavaScript to handle the action of "showing the highlight image when hovering over the area". If you're using jQuery, attaching a mouseenter event to the map element can accomplish this easily;
$('map').on('mouseenter', function () { $('#highlight').show(); })
$('map').on('mouseleave', function () { $('#highlight').hide(); })
FULL DEMO: http://jsfiddle.net/pggyq4t8/2/ (hover over the top floor)
In the midst of May 2020, I shared a solution in response to a similar query on Stack Overflow. The approach involved utilizing an SVG file which offered enhanced control over image overlay compared to conventional methods. Additionally, I demonstrated a CSS-only solution incorporating <a> elements with text that appears upon hovering. Moreover, I ensured the responsiveness of the HTML page across various devices.
For demonstration purposes, here is a snippet of the code provided:
/*
For further details and insights into responsive element sizing,
refer to the following answers on Stack Overflow:
https://stackoverflow.com/a/62033317/2015909
https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, * { box-sizing: inherit }
body { margin: 0 }
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body { font-size: 1rem }
[band] { display: flex; flex-flow: column wrap; align-content: center }
[padded="1"], [padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
p1(320,32) p2(1920, 72) => 0.025x + 24
p3(320, 8) p4(1920,320) => 0.195x - 54.4
'Band padding' is only active when 'page padding' is off
*/
padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
/* Ensuring optimal viewport adjustment for images in both portrait and landscape orientations */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
</style><body padded="0">
<div id="construction-site" band="padded">
<svg viewbox="0 0 1600 1200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.line { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer }
.polyline { fill : Red ; fill-opacity : 0 }
.floor-text { fill: Black; stroke: none; fill-opacity: 0; cursor: default;
font-weight: bold; font-family: sans-serif;
/* responsive font using y = mx + b */
font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
}
.floor:hover>.line { fill-opacity: .4; stroke-opacity: .8 }
.floor:hover+.floor-text { fill-opacity: .7 }
</style>
<image href="https://i.imgur.com/0i4N0d3.jpg"/>
<a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
<polyline class="line polyline"
points="201.242,678.473 1121.43, 333.16 1370.24,
553.473 1387.74, 668.473 1127.49,
474.098 189.242, 753.473 202.242, 678.973"/>
<line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>
</a>
<text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
</svg>
</div>
</body>Is there a way to conceal the td elements in a table that do not have the inline CSS attribute width:12%;? See code example below. <td class="" id=""> <td class="" id=""> <td class="" id=""> <td width="12%" class="" id=""><!-- ...
I'm trying to implement a code that restricts the camera movement in A-frame. The current functionality teleports the camera back to the position 0, 1.6, 0 when it moves 10 spaces away from the starting point on the x or y axis. However, I want to mod ...
I'm brand new to Vue.js. Specifically, the requirement is that the backend will input time slot values into the data-times attributes in array format. My task is to extract and update these time slots based on the selected location. If "Location 1" ...
I'm currently at a loss for solutions as I can't seem to pinpoint the reason behind this peculiar behavior. I'm using Orchard CMS 1.4 along with a customized superfish stylesheet. Interestingly, the behavior varies depending on how the site ...
I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...
I am dealing with the following constellation: <dl> <dt>Content</dt> <dd>123</dd> <dt>Content</dt> <dd>123</dd> <dt>Content</dt> <dd>123</dd> </dt> ...
I have designed a simple image gallery using the following CSS: .product_container { width:100%; display:block; } .product_images { width:45%; display:inline-block; border:1px solid black; } .product_images .large { } .product_images ...
I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...
I am having trouble with my infoWindow on Google Maps displaying the correct information. I need to adjust the size of the white div to match the grey box inside and also resize the arrow that connects the marker to the white div. Check out the image belo ...
I have a form with a submit button. Normally, when the submit action is taken, it returns to a new page and does not update the partial view. I tried using an ajax call in a jQuery live function, but it still replaces the entire content instead of returnin ...
Working on an application using PhoneGap for Android, I encountered an error while running this code block: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ...
Currently, I am working on a script using JQuery within an ASP.NET page. Here is an example of a JSON string that I am dealing with: <input id="hfImages" type="hidden" value="[ {"ProductID": "000001", "Small": "http://myimages.com/images/I/75.jpg", " ...
My PHP contact form is functioning perfectly fine, but I'm facing a challenge when it comes to styling the submit button. Here is the current code for the button: <input type="submit" value="Submit"> I want to enhance the button using CSS. He ...
I am currently working with a jQuery plugin (Link) and facing an issue in the code below. I am unsure how to call the MVC controller and populate the dropdown with data. <input class="form-control" id="test" value="" /> <script> $('#test& ...
Here is how my applications.css file looks: *= require_self *= require twitter/bootstrap *= require jquery_ui/jquery-ui-1.8.17.custom *= require_tree . The jQuery-UI images are stored in vendor/assets/stylesheets/jquery_ui/images. This setup functio ...
In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...
Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...
I am facing an issue with my Bootstrap 5 modal and the popovers that are attached to it. On hovering over a button in my HTML, a popover appears asking 'Are you sure?' and instructing the user to click the button to proceed. Clicking the button ...
I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...
Below is a code snippet that showcases the issue I'm currently facing. jsFiddle Demo <div class="normal"> <a href="#">Test</a> <a href="#">Test longer</a> </div> <div class="ib blockbyclass"> < ...