How do I pop-up to show a larger pic?
I made a quick test page at http://www.carcreditnh.com/wernertest.htm
The idea is to mouse-over the picture and have a larger pic show up.
The larger pic is only showing within the confines of the smaller one.
I'm using the web address feature with the layer i called 'mouseover'
Any help would be greatly appreciated.
Thank you,
Bobby Harris
Bradford, MA
Re: How do I pop-up to show a larger pic?
To do a pop up you link either a photo or a button to another image on its own layer. So for example say you have a button and when the visitor mouses over that button a larger image appears. The image that appears needs to be on its own layer. If the Layer is named BigPhoto then in the web address link window, enter BigPhoto.
Gary
Re: How do I pop-up to show a larger pic?
(This is covered in the release notes.) Objects on a mouse over layer only appear within the confines of the object mouse-overed. You could use a popup layer instead which reveals the entire layer, or you could put an invisible object around the mouseover object to effectively increase the boundary to be revealed. Again, this is all covered in the release notes. Now I admit, the release notes on this topic aren't the best for learning and are really for reference; when learning, I also struggled to figure a few things out. I may write a tutorial about website creation one day; I don't have the enthusiasm at the moment, so it wont happen anytime soon unfortunately.
Re: How do I pop-up to show a larger pic?
That's what I did. I have 2 layers. 'Layer1' has everything you see initially.
'mouseover' has JUST that photo, sized around 400 x 600 ready to go.
When you mouse-over the 1st photo, it does show the new layer, but only the part of it that appears within that first photo you mouse'd over.
(mouseover'd ????)
Anyway - that's what's happening.
Thanks,
-Harris
Re: How do I pop-up to show a larger pic?
I think you need to use a "popup" layer not a "mouseover" layer. As Xhris said "Objects on a mouse over layer only appear within the confines of the object mouse-overed"
Re: How do I pop-up to show a larger pic?
'mouseover' is just the name of the layer
The help file says the following
==================
Popups
The second method is more powerful. A popup is implemented by simply adding a link to an object and setting that link to be the name of a layer. When you mouse-over the object, the associated layer is displayed.
For example, to make a photo change from black and white to full color when the mouse pointer is over it:
Position and size the original photo as required. Copy it to the clipboard.
Click the white color on the Color Line to make it a black & white photo.
Add a Web Address link to the photo by right clicking on it and choosing "Web address...". Set the URL field to the name of the layer you will create next. e.g. "Photo1MouseOver".
Create a new layer with this name e.g. "Photo1MouseOver", in front of the layer containing the original photo.
Paste the photo into the new layer from the clipboard. It can be anywhere on the page, or use "Edit -> Paste in place" to place the copy exactly on top of the old one.
Now when you export and mouse over the black and white copy, it should display the full color copy.
You can have as many popups as you like in your design, each on its own layer. But always make sure that the popup layer is in front of, not behind, the layer or layers which reference it.
==================
This is what I did except that instead of changing the color, I made the photo larger.
Re: How do I pop-up to show a larger pic?
The above comments are correct. For each large version photo, create a new layer e.g. called Photo1, then just add a Web Address link 'Photo1' to the original small version of the photo on the original layer.
Also a tip. Those photos should be JPG images to save space. They are PNGs right now which I don't really understand. But if you give them a name of 'JPEG' using the Label Tag icon on the Selector InfoBar they will be exported as JPGs.
Having said that the pop-up one might have to be PNGs still because you will want the background to show around them.
Also the black background 'shadow' effect would be a lot more effective using the Shadow Tool and giving them a soft shadow.
Re: How do I pop-up to show a larger pic?
They're PNG files because that's what Xara creates when it generates the web page on export.
When the mouse passes over the small image it does change things, but the size of the resulting pic is cut off.
-Harris
Re: How do I pop-up to show a larger pic?
I decided to try something a little different and start from scratch.
When all else fails, sometimes a revisit to the blank screen gives me clarity.
I erased everything and created 3 layers.
Layers:
Mainpage
smallcar1
largecar1
NOW it does what I wanted. Maybe having the small car on the same layer as everything else was a problem. Not sure.
Now - can I somehow click each pic and have the big one stay there til I click a 2nd one and switch it?
http://www.carcreditnh.com/wernertest2.htm right now.
-Harris
Re: How do I pop-up to show a larger pic?
The advantage of the "mouseover" layer is that it can contain many mouse over object results. So for example, you can have several buttons in a mouse over state on that one layer, and only the part of the layer corresponding to the object being mouse-overed is shown. It saves using many layers in other words, but is not always desired. This isn't as clear as it could be in the release notes for educational purposes (which may not be the purpose of the release notes granted, but it's what people turn to initially).
Re: How do I pop-up to show a larger pic?
I guess I'm following up on charles' comment--
-but it doesn't have to be necessarily a bigger picture that the popup displays, right? It could be a whole page with photos and text.
Here's an excellent example of mousovers (not made by me and not with xara either) that show a mini page when the menu is moused over.
http://www.bagborroworsteal.com/ui/howitworks#damage
I like this because there's no click, you just mouse, and it's there. And it might be a great way for the original poster of this thread to incorporate bigger pictures (layout wise I'm talking).
I'm assuming that this exact kind of navigation, showing additional text and photos on mouse movement, is possible with xx4 and the new popup layer navigation feature ( or the rollover with invisible rectangle, but that's more work)
Re: How do I pop-up to show a larger pic?
I'm going to be writing a new tutorial about website making in Xara. There are quite a few nuances that you need to be aware of to make a working site using all the features available, such as popups, and flash, and popups with flash etc. I'm currently making my own website as a learning experience before I write about it.
I think you can actually do that kind of thing in the above website in Xara.
Re: How do I pop-up to show a larger pic?
There is a tutorial for this in the HTML Workbook here Adding Content
Re: How do I pop-up to show a larger pic?
There are some really useful tips there actually, like editing link colours etc.