Placing a GIF on top of an image through the use of Javascript

Question

Placing a GIF on top of an image through the use of Javascript

Welcome to my first post on this platform! I'm currently in the process of creating a portfolio website featuring long panoramic photographs displayed within scrollable divs. You can check it out here: www.edentan.co.uk/portfolio.html. My challenge right now is overlaying a GIF onto one of these photos, but positioning it precisely on the image seems tricky. It seems like using JavaScript may be necessary as simply using CSS for positioning restricts me to determining the position based on pixels from the screen edge.

var imageFive = document.getElementById("Img5").style.left = 500%

The code snippet above does work, but the issue lies in how the position varies with different screen resolutions. What I aim to accomplish is having .style.left operate similarly to how I've scrolled left using the script provided below.

var imageThree = document.getElementById('Img3')
var widthImg3 = imageThree.clientWidth;
const Img3El = document.querySelector('#Div3');
Img3El.scrollLeft = widthImg3/1.26;

In essence, I want to style.left Img5 by a fraction relative to Img3, yet I'm struggling to formulate the script to achieve this goal. Any assistance would be greatly appreciated, and thank you for taking the time to read through my request!

javascript html jquery css

Answer 1

Answer №1

One thing to note is that it's best practice to replace "var" with "let" in your code, as using var can lead to potential issues.

Another suggestion is to avoid using javascript if possible – instead, consider adding styles directly to your HTML file within the header using CSS. This approach tends to be simpler and more efficient. You can achieve the desired effect by applying position:absolute to positioning a gif over an image, utilizing VW or VH units for responsiveness. Here's a snippet of how you could do it:

#image2 {
// add styling for image 2 here
}

#image4 {
     position: absolute;
     left: specify vw value
     top: specify vh value
}

Answer 2

One thing to note is that it's best practice to replace "var" with "let" in your code, as using var can lead to potential issues.

Another suggestion is to avoid using javascript if possible – instead, consider adding styles directly to your HTML file within the header using CSS. This approach tends to be simpler and more efficient. You can achieve the desired effect by applying position:absolute to positioning a gif over an image, utilizing VW or VH units for responsiveness. Here's a snippet of how you could do it:

#image2 {
// add styling for image 2 here
}

#image4 {
     position: absolute;
     left: specify vw value
     top: specify vh value
}

Placing a GIF on top of an image through the use of Javascript

Answer №1

Similar questions

The strategic manipulation of numerous elements within a group

Activate a change or response when the input value in Javascript is altered

Is there a way to remove a value from the search bar while updating the table at the same time?

Can you explain the significance of the ColSpan property in the Material UI TablePagination?

JavaScript validation is failing, yet the form is still getting submitted

Guide on connecting various information to a jquery element through .data() within a custom plugin

Pagination in AngularJS that allows users to easily "jump to page"

How can I create a hover effect animation in React?

A guide on accessing header response information in Vue.js

What is the best way to execute a function only once after retrieving a Firestore collection?

The elusive Ajax seems to be slipping through our grasp,

Create a container with three rows (divs) each taking up 33.333333% of the container's height, designed to be responsive to changes in

While working in Next.js, I utilized an `<Image />` tag with a link to an image, only to encounter an unexpected error

Stop JavaScript Injection Attacks

Tips for displaying a div briefly before loading the second page

Utilizing JavaScript to enable a Bootstrap 5 dropdown menu to open on hover for desktop users and be clickable for mobile users

What folder layout is best suited for organizing Protractor end-to-end test cases?

Guide on adding information to details Table in mvc core with Jquery or utilize Jquery and Ajax for the task

What is the method to exhibit the outcome of a promise on a web page within a React component?

Unusual display of fonts on Chrome