Looking for a new take on the old Image swap

Hi Group, I’m looking for a new way to do image swap on click. The forum topics I’ve seen seem to focus on changing images on hover, and usually only swapping between a couple of images.

I am looking to have any of several images displayed in an fixed position when either of their corresponding links are clicked/touched.

I see where I can easily get the replacement image to display using Interactions, but the problem in this case is how to hide all other images when any one link is selected. I Also see where I could use additional Interaction trigger steps to hide the other images when one is selected, but that is a lot of hiding iterations. There has to be a better way.


Here is my public share link: https://preview.webflow.com/preview/coreappliance?preview=ee38fd5e3d15670a3740ee746e9b9c20

Look under Read More in Service Area

I think custom javascript is the only way to do this. I had wanted similar behavior for a project a while back and a friend was able to help write some code for me. Maybe someone else here can chime in and prove me wrong.

@DFink I ended up using Javascript. It is a little funky because I am using it to show different Google maps and Maps has some kind of crazy limitation on how it can be called from within an iFrame. It seems to work ok on desktop browsers, but does not work at all on mobile devices. Any more insight is always appreciated.

Can you post a link to the live site so i can take a look?

Hey @DFink heres the link to the live site: http://coreappliancerepair.com/service-area.html
Thanks for taking a look! :+1:

I’m thinking this is a similar topic ?

1 Like

Thanks for the reply @Revolution. Not sure that topic covers what I’m trying to do here and seems a bit convoluted by images loading from a database? (maybe I’m reading it wrong)

My current solution uses JS and works well for desktops but not for mobile device. May be a simple fix.

Here is what’s in the page HEAD area:

	<script language="JavaScript" type="text/javascript">
	<!--
	  function changeFrame(newPage){
		document.getElementById("myframe").src = newPage;
	  }
	//-->
	</script>

And here is how its called in the BODY

<span id="areaMenu">
		<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d105799.31675083817!2d-84.26198661935238!3d34.03800544861125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f59f301a38a179%3A0x3d46d6a87e40bd01!2sJohns+Creek%2C+GA!5e0!3m2!1sen!2sus!4v1461505364185" id="johnscreek" onClick="changeFrame(this.href); return false;">Johns Creek</a><br>
		<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52953.65132261371!2d-84.03388261575127!3d33.9513322410178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f508ebdb5f57ab%3A0xc3db0f7dcd03069a!2sLawrenceville%2C+GA!5e0!3m2!1sen!2sus!4v1461505434413" id="lawrenceville" onClick="changeFrame(this.href); return false;">Lawrenceville</a><br>

	  </span>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.03409967737!2d-84.5606900792521!3d33.76791919528135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1461427498431" id="myframe" width="600" height="300" frameborder="0" style="border:0">
	You can't see iFrames  :(. Please use a more modern browser :).

Cant seem to show the closing iFrame tag here, but assume it is there.

@DFink , any chance to look at this re:why it may not be working for mobile device?

Are you just loading maps? If so, why not just use the tabs component to load the different maps below and style the tabs as you like?

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