Coding multiple hovers in Squarespace?

JavaScript
1

How do I add another image rollover to this code without disturbing the current one?
Here is the code:

<BODY>
<P><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/578d28252e69cfbce56e7ed3/1468868645631/1.png/" ID="img1" onMouseOver="doMouseOver()" onMouseOut = "doMouseOut()"/></P>
<P><A HREF="link1.html" onmouseover="doMouseOver()" onMouseOut = "doMouseOut()">Rollover Link</A></P>
<script language="Javascript">
  function doMouseOver() {
  	document.getElementById("img1").src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/578d0446e6f2e1c03c0e13e3/1468859462029/1_hover.png";
  }
  function doMouseOut() {
	document.getElementById('img1').src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/578d28252e69cfbce56e7ed3/1468868645631/1.png";
}
</script>
</BODY>

The link to find the active site is: http://circa.design/synchronous-test

2

Do you mean that while you go over the image and it changes, a second image changes too, at the same time?

3

Or do you mean adding another such construct? In this case, one possibility would be to give each its own event handler – like doMouseOver1(), doMouseOver2() etc. – but this would of course be terribly inefficient. A better way to do this to provide the hover-image directly within the markup as a data attribute, so that the JS can stay agnostic of the content. Like

<div class="sqs-block-content">
  <p><img 
    src="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/578d28252e69cfbce56e7ed3/1468868645631/1.png" id="img1" 
    data-mouseover="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/578d0446e6f2e1c03c0e13e3/1468859462029/1_hover.png"/></p>
  <p><a href="link1.html">Rollover Link</a></p>
</div>

Note that I removed the inline function calls. Instead, you might add an event listener within the JS so that we can directly access the element on which it is called. Like

// Get references to all container blocks
const sqsBlocks = document.querySelectorAll('.sqs-block-content');

// Function to be called on mouseover
const _mouseoverHandler = function(event) {

  // Find the image in the container on which this
  // function is called
  let img = this.querySelector('img');
  
  // Only show the hover-image when a non-p element
  // is hovered directly (i.e. not white space in between)
  if (event.target.tagName.toLowerCase() !== 'p') {

    // Set the image src to the URL given in data-mouseover
    img.src = img.getAttribute('data-mouseover');
  }
};


// Function to be called on mouseout analogously
const _mouseoutHandler = function(event) {
  let img = this.querySelector('img');
  img.src = img.getAttribute('data-mouseout');
};


// Loop through the containers
for (let sqsBlock of sqsBlocks) {

  // Again, get the image within the container
  let img = sqsBlock.querySelector('img');

  // This is to remember the original src
  img.setAttribute('data-mouseout', img.src);

  // Instead of adding event listeners to the <img> and <a> elements
  // separately, we can simply add one to their container element.
  sqsBlock.addEventListener('mouseover', _mouseoverHandler);
  sqsBlock.addEventListener('mouseout', _mouseoutHandler);
}
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.