Creating an Image rollover in Xway

Xway
1

Hi. One time Freeway user now on macOS Catalina trying to figure out how how to create a rollover effect in XWAy where when you hover over one graphic box ( with link) another image appears to the side of that graphic box. I have done this before with Freeway rollover actions but can not figure out how to do it in Xway. There is an example here: http://izzyburgwin.com. When you hover over “sketchbooks”, for example, a small fox illustration appears. Thank you.

2

Hi Izzy,

Xway supports CSS rollovers.

There is a Dynamic Styles section in the Box Inspector that allows you to set up a style that is used when the mouse hovers over a box. There is also documentation on dynamic styles in the Xway User Guide, which is available from Xway’s Help menu (search the guide for “dynamic styles”).

To get a similar effect in this case, you could set a background image for the “sketchbooks” box. The background image would contain your fox. and would be aligned right (Horizontal Position: right) and set to not repeat (Horizontal Repeat: None, Vertical Repeat: None).

There are actually two possibilities for how you set the background image:

  1. You could set it on a container box that contains the image box
  2. You could set it directly on the image box, but add some padding to the right of the image box so there is a transparent area where the background image can appear.

Xway’s Web view is useful for testing dynamic effects.

3

Thanks! I used method 2. I have had some issue controlling the size of the background image. Not sure if this is because the initial link image is sized using an adjusted percentage to the imported file.

Also, is there anyway to have all of the background images of each of link image appear at the same time if I hover over the the title banner image? Basically I would like all of the foxes to appear at the same time if someone hovers over the “Izzy Burgwin” image banner at the top, as well as work individually when you hover over each separate link image.

4

I don’t know how to do that using CSS, although it should be possible using JavaScript (onmouseover and onmouseout).

I looked at your current Freeway site and it doesn’t seem to do this.

5

Hi Jeremy,

Thank you for the insight, again.

I looked at your current Freeway site and it doesn’t seem to do this.

Yes, Izzy (my daughter) is doing a graphic redesign for the site and asked if the new version could have this effect.

Darryl

6

Hi Darryl,

Here’s how you could set a background to appear on one or more items when a user moves the mouse over a different item.

  1. Create a document with two boxes (item1 and item2)

  2. Select item1 and add an extended attribute in the Extended Attributes section of the Box Inspector: Name: onmouseover, Value: SetBackgrounds()

  3. Add another extended attribute: Name: onmouseout, Value: ClearBackgrounds()

  4. Go to the Page Inspector and paste the following code in the JavaScript Markup section

function SetBackgrounds()
{
   document.getElementById("item2").style.background = "red";
}

function ClearBackgrounds()
{
   document.getElementById("item2").style.background = "";
}

Now, if you want to set and clear the backgrounds for more than one element, extend the functions in JavaScript Markup by duplicating what’s there and using the appropriate element id for each item. E.g.

function SetBackgrounds()
{
   document.getElementById("item2").style.background = "red";
   document.getElementById("item3").style.background = "red";
}

In your case, you want to set background images rather than background colours. You can do this by looking at Xway’s HTML view and finding where the hover background is set. It might be something like background:url(resources/[imagename].jpg) center no-repeat. You can replace "red" with "url(resources/[imagename].jpg) center no-repeat"

If you use a text editor to edit this code, make sure it doesn’t change the straight quotes into curly quotes (TextEdit in Plain Text mode should be OK).

Note: this works for me, but I’m not a JavaScript programmer. If anyone would like to suggest improvements, please do so!

7

You might be able to do this with a combination selector, depending on how the rest of the page is constructed. If the header was nested the same container as the links at a predictable offset, like this:

<div>
  <header>Something here</header>
  <a></a>  <a></a>  <a></a>  <a></a> 
</div>

Then the CSS selector could be something like header:hover ~ a which would make the hover event on the header do something to the peer A tag.

Walter

2 Likes
8

Adapting Walter’s example:

  1. Create a document with two boxes (item1 and item2)

  2. Go to the Page Inspector and paste the following code in the CSS Markup section

#item1:hover ~ #item2 { background: red }

This will change item2’s background to red when you hover over item1.

It’s good that this uses CSS rather than JavaScript (not everyone has JavaScript turned on), but as @waltd suggests, it does require the other elements (in this case) to be siblings of the hover element.

1 Like
9

They don’t have to be siblings per se, but they do have to be at a very predictable offset from one another. The combining selectors can do any kind of path from one place to another. It could be as ridiculous as #item1:hover > #item2 .some-class .some-other-class. The key is that it can only flow from the outer toward the inner. There is no good way to use a hover over a leaf node to affect one of its ancestors’ styles. (It’s promised as coming, it’s just not here yet.)

Walter

10

Yeah, I meant that ~ requires the other elements to be (later) siblings.

1 Like
11

Thanks Jeremy. Thanks Walter. Let me see what I can do with your suggestions.

Cheers

Darryl