I have quite a large image that I am going to use for portfolio navigation.
Rather than have this image whole, I want to slice it up. I have been doing this in Blocks previously, however, in this iteration am using @willwood’s Hotspot stack to create an easy/quicker loading page to link to individual pages of the portfolio.
I’ve tried a couple of ways but to no avail.
They have been to:
Use an image stack, set to the correct size for each ‘slice’. 3 images stacks where used, then the following CSS applied to them in the inspector settings:
[code]#stacks_out_139_page3 {
position: absolute;
top: 0px !important;
left: 0px !important;
}
#stacks_out_141_page3 {
position: absolute;
top: 0px !important;
left: 298px !important;
}
#stacks_out_143_page3 {
position: absolute;
top: 0px !important;
left: 342px !important;
}[/code]
When the page has been previewed (and uploaded to server see it here) the images are missing, when I ‘inspect element’ the divs are in the position I want but the images are not being shown - see the screen shot.
The second way I have tried is to put the image stacks (images all set to the desired sizes) into a 3 column stack which can be seen here. The problem of course being that there is a gutter between the images so no good at all.
I am fairly confident with HTML and could arrange this image using purely HTML, however, what I am not so good at are the added extras, which is why I use RW and stacks. Having an image that is sitting nicely on the page but can’t use the Hotspots stack isn’t so useful to me!!
Any help would be greatly appreciated!!!
And I thank you in advance!!
Rebecca