What could be the issue with the functionality of my slider link url?

The slider is functional, but the links are not working properly. Each slide should redirect to a different URL

For instance:

  1. Slide 1 with a link to Bing,
  2. Slide 2 with a link to Google,
  3. Slide 3 with a link to Yahoo.

I am unable to incorporate Javascript for this.

<div class="framebanner">

<img src="http://i.imgur.com/cdPVj2b.jpg" alt="" usemap="#kitchurrasco" id="kitchurrasco">

<img src="http://i.imgur.com/z3uurbl.jpg" alt="" usemap="#rechaud" id="rechaud">

<img src="http://i.imgur.com/gZ4awVQ.jpg" alt="" usemap="#refrigerator" id="refrigerator">

</div>

<map name="kitchurrasco" id="kitchurrasco">
<area alt="" href="http://bing.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="http://bing.com" />
</map>

<map name="rechaud" id="rechaud">
<area alt="" title="Rechaud Banho Maria Aço Inox GN 1/2 65mm 9 Litros" href="http://www.google.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="" href="http://www.google.com" />
</map>

<map name="refrigerator" id="refrigerator">
<area alt="" href="http://yahoo.com" shape="rect" coords="0,0,847,300" style="outline:none;" target="_self"     />
<area shape="rect" coords="845,298,847,300" alt="" style="outline:none;" title="" href="http://yahoo.com" />
</map>

Sample Website: http://codepen.io/anon/pen/XboOXM

javascripthtmlcssurl

Answer №1

By arranging your images on top of each other using the absolute positioning, only one image is displayed on top while the link in that image map is the only active one.

To ensure all links work properly, you need to adjust the z-index along with the animation of the visible image. This will keep it on top and allow its link to function. Here's an updated example with the following CSS changes:

@media (max-width: 480px) {
    #espacoembranco img { 
        width: 270px!important;
    }
}

.framebanner img {
    max-width:97%;
    position: absolute;
    top: 90px;
    z-index: 3;
    -webkit-animation: slideshow 18s linear 0s infinite!important;
    -moz-animation: slideshow 18s linear 0s infinite!important;
    -ms-animation: slideshow 18s linear 0s infinite!important;
    -o-animation: slideshow 18s linear 0s infinite!important;
    animation: slideshow 18s linear 0s infinite!important;
}

.framebanner img:nth-child(2) {
    z-index: 2;
    -webkit-animation: slideshow 18s linear 6s infinite!important;
    -moz-animation: slideshow 18s linear 6s infinite!important;
    -ms-animation: slideshow 18s linear 6s infinite!important;
    -o-animation: slideshow 18s linear 6s infinite!important;
    animation: slideshow 18s linear 6s infinite!important;
}

.framebanner img:nth-child(3) {
    z-index: 1;
    -webkit-animation: slideshow 18s linear 12s infinite!important;
    -moz-animation: slideshow 18s linear 12s infinite!important;
    -ms-animation: slideshow 18s linear 12s infinite!important;
    -o-animation: slideshow 18s linear 12s infinite!important;
    animation: slideshow 18s linear 12s infinite!important;
}
@keyframes slideshow {
 25% { opacity: 1;z-index:4}
   33.33% { opacity: 0;z-index:1} 
   91.66% { opacity: 0;z-index:1}
   100% { opacity: 1;z-index:4}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JSON parse/stringify for data manipulation

I'm seeking advice on manipulating JSON data using JavaScript, particularly with the stringify/parse methods. In this scenario, I start by creating a JSON string and then use parse to convert it into an object. However, my goal is to efficiently delet ...

javascriptjson

Strategies for Preserving Added Field Data Using JQuery

I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...

jqueryhtmldatabasetheory

Struggling to detect a click event within a VueJS application when using a bootstrap button-group

I am currently working on a VueJS project that includes a bootstrap button group... <div class="btn-group btn-group-xs pull-right" data-toggle="buttons"> <label class="btn btn-primary label-primary"> <input type="radio" name="options" i ...

javascripttwitter-bootstrapvue.js

What is the best way to access the names of iframes and frames within window.length?

I am currently working on a project with numerous frames. While I am aware that using window.length will provide the number of "child browsing contexts", like frames and iframes, I am unsure how to access a list of these frames and view their names. Is t ...

javascript

I am currently exploring React Router, but I am struggling to grasp this particular behavior

My Express server serves the Create-React-App build. When I access http://localhost:8000/ while the server is listening, my page loads correctly. However, if I reload the page or navigate directly to it from the navigation bar, instead of seeing the UI, pl ...

javascriptnode.jsexpresscreate-react-appreact-router-dom

Does Div have the capability for text-shadow?

Is there a way to create a shadow effect for DIVs similar to the text-shadow property? While text-shadow is great for adding shadows to individual pieces of text, I'm interested in applying a shadow effect to an entire DIV element. Does anyone have a ...

css

Sending output from javascript back to html

<head> function displayProductName(name) { } </head> <body> <img src="...images/car.jpg" onclick="displayProductName('car')"> </body> How can I modify this javascript function to display the value received from t ...

javascripthtml

Achieve an exceptional design by organizing the elements to gracefully drift from the left side to the right, seamlessly cascading from

I am currently working on a CSS and HTML layout, and I have a specific vision for how I want the layout to be displayed. It should appear from left to right and top to bottom, as shown in this image: https://i.stack.imgur.com/Q0VmR.jpg Each box within the ...

htmlcsslayout

How to align content within a FormControlLabel using Material UI

My goal is to line up the label and radio button inside a FormControlLabel component so that the label occupies the same width regardless of its content. The current appearance can be seen below: https://i.stack.imgur.com/GhXed.png Below is the code I am ...

cssreactjsmaterial-ui

Discovering the Secrets of Accessing and Modifying Item Values in BIRT

Is it feasible to create using only Javascript without utilizing any Java functions? Is there a way to access values from elements like labels, tables, or charts by calling them from an HTML button? I am currently working with Openlayers and BIRT. I need ...

javascripthtmlbirt

When the page loads, a JavaScript function is triggered

My switchDiv function in Javascript is being unexpectedly called when the page loads. It goes through each case in the switch statement, except for the default case. Does anyone know how to solve this issue? $(document).ready(function() { $("#be-button" ...

javascriptjquery

How can I incorporate dynamic fields into a Typescript type/interface?

In my Typescript interface, I have a predefined set of fields like this: export interface Data { date_created: string; stamp: string; } let myData: Data; But now I need to incorporate "dynamic" fields that can be determined only at runtime. This me ...

javascripttypescript

Unexpected triggering of second fail in Jquery Deferreds

Currently, I have a sequencing function that involves two REST steps - step 1 and step 2. The way I am currently handling this is by calling step1 with fail and then handlers, followed by step2 with its own fail and then handler. self.step1() .fail(se ...

javascriptjquerypromisejquery-deferreddeferred

I am looking to incorporate the user's ID into either the URL path or the address of the webpage

I have a URL displayed on my page: "http://127.0.0.1:8000/affiliation/link/10006/". In the URL above, I need to include the user id as well so that it appears like: "http://127.0.0.1:8000/affiliation/link/01/10006/", where '01' represents the us ...

pythondjangourl

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Tips for finding data attribute in Select2?

Is it possible to search for items based on both the value and data-test attribute in select2? <option value="Test 1" data-test="user-1">Test 1</option> <option value="Test 2" data-test="user-2">T ...

javascripthtmlselectbootstrap-4jquery-select2

increasing the gap spacing between Bootstrap panels in columns

On this page: I am trying to eliminate the space between the panels in the "Funzionalità" section. Each panel has the following code: #bor_panel { border-radius: 12px; border: 2px solid #287396; padding: 20px; width: 170px; height: 170px; display: flex; ...

htmlcsspanelbootstrap-4col

Activate/Deactivate toggle using Vue.js

new Vue({ el: '#app', data: { terms: false, fullname: false, mobile: false, area: false, city: false, }, computed: { isDisabled: function(){ return !this.terms && !this.fullname && !this.mob ...

javascriptvue.js

Tips for resizing an object in a single direction using THREE.JS

I have encountered an issue while adding a cube to my scene using THREE.JS. When I try to change the height of the cube by increasing its y coordinate, it also seems to expand in the negative y direction as well. var cubeGeometry2 = new THREE.BoxGeomet ...

javascriptanimationthree.js

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox