Thread: Changing color of matte around picture

Good morning everyone. I am currently working on rebuilding my website in BV and would like to ask for help on something special. I'm pretty sure I've seen this done on other websites, but would like to know if it is possible to do in BV. Here is a link to a page showing what I've got now:

http://www.lostdutchmanaz.com/photos.htm

The cartoon with the matte at the top is built with a shape underneath a "gallery" picture. The block of colors in the middle are the different colors of mattes that a customer can choose from.

What I want to be able to do is: Have customer click on a color box and have it switch to that color under the cartoon. Is this possible?

Sheryl
(newbie to BV)

Sheryl, I know it can be done but personally don't know the script for it. It might be easier to have each of the colors link to a pop-up of the picture with that color frame? That would also allow them to see it in a bigger view.

Just an idea. And I know someone will have the answer to how to change the matte color :)

Thanks Beth.

Hopefully someone will have the answer. The way you suggested would involve creating a lot of new .jpgs or .gifs. I have tons of different pictures, so I would want my customers to see the "exact" picture on the page in each of the colored mattes.

Sheryl

Here is a way that might be useful if it its just some colors/shapes you want.
What all you will need:

1. I-Frame - behind the photo area; sized and centered where you want the "picture frame" to display.
2. HTML page for your "photo frames"(ex. name for this page: photosFrame1Set1)
3. Text link or Colored shapes (or thumbnail image etc...) for each choice

Place an I-Frame behind the "gallery" photo or area and in the options dialog for the IFrame, give it an easy name to remember(something that's short and also describes where it is...like the page it's on)

ex.:the page is "photos.html" so why not: photosFrame1 (this way more advanced techniques to update the colors/shapes used for that gallery/area will be easier to accomplish/refferrence)

set the URL of the IFrame to url of the html page with your desired colors/shapes: ex.

http://www.lostdutchmanaz.com/photosFrame1Set1.html

make sure to UNCHECK show border and the scrollbar...in other words neither should show at all.

Now for the page with the different "photo frames."

***Start a new page in BV and make sure to UNCHECK "Center in browser" in "Page Properties"***

Start at the top left of the page and add your shape/image and make sure you make it the EXACT SAME SIZE or a pixel smaller than the size of the IFrame you made for it on the photos.html page.

**when you got it the right size...with the shape/image selected..press the up arrow a couple times and the left arrow a couple times...this makes sure the shape/image is at the (x,y) coordinates of (0,0). resize the shape again if needed.

now that you have the first one in place...lock it in place! lol

Next select Insert>Bookmark from the menu or the bookmark icon from the toolbar and click and drag to cover and match the shape/image.Double-click for the bookmark's dialog box and name it something very short(ex. if you used a blue square, name it blue)

Repeat these two steps with each shape/image + Bookmark you want to use for your "photo frame" choices. Each one you will place directly beneath the one before it down the left side of the page making sure not to overlap or size bigger than the Iframe.

Give each bookmark a unique name(no two the same)

***As long as your Bookmark/shape is the same size as the IFrame...all will work seamlessly, otherwise ...some adjustments MIGHT be needed, maybe.****

save and publish the page and return to the photos.html page with the I-Frame and Gallery Photo

Now all you have to do to make the shapes change in the Iframe behind the photo is to link the TEXT LINKS or small images to the bookmark of the selection you want to see.

Okay, say that you made the one page with all your choices using colored squares: blue, green, orange...(you named your bookmarks for these as: blue, green, orange). The first thing you will see behind the photo when you load the page will be the blue square.

to change it to the green square you would create a link to the url and bookmark of it in this format: pageURL#bookmark name

like so:
http://www.lostdutchmanaz.com/photosFrame1Set1.html#green

this is what you put as the url of the link you use for that choice, whether it be a Text link "Green" or a small green square hyperlinked using the URL above.
*****SET THE "TARGET" of the link to the name of the I-Frame you created by TYPING it where it says "Target" instead of using the drop down list...ex.: photosFrame1

this way, when someone clicks on the little green square, the bookmark "green" on the page "photosFrame1Set1.html" will be showing in the I-Frame "photosFrame1" on your "photos.html" page behind the picture.


Tada!!

here is somewhat of an example to what I mean...the first is the page i used with bookmarks and the secon is sort of like a viewer or GUI to change to each one:

http://www.graphxntrix.com/test/bookmarks.html

http://www.graphxntrix.com/test/gui-temp2.html

I hope can give you some insight as to what you are trying to accomplish.

All I can say is WOW Robert! Thank you for all the information. I've printed out your instructions so I can read them over. Sure hope I can figure it out. I have over 300 individual product pages, but I'm using a product template so once I've got the I-Frame set up I shouldn't have to change it. Once I have the "photosFrame1" set up it should work the same on every page then right?

Now all I have to do is find a thread that explains what an I-Frame is . I've never heard of this before. Is there a BV tutorial on this somewhere?

Again, thank you for all your time. The instructions sure sound like they will give me the result I'm looking for. I'm just hoping that I'll be able to implement it all.

Sincerely,
Sheryl Tupa

Robert,

Just wanted to let you know that I did figure out the first step which was placing the I-Frame behind my picture. Will work tonight on the next step.

Sheryl

Sheryl, doesn't it feel good to learn something new?? Can't wait to see it.

Beth, I love the BV software! It sure is packed with features. Thanks for pointing me in this direction. I've just finished working on the I-Frame set up exactly the way Robert said to do it. Only problem is . . . it looks like I can't "preview" the page to make sure it's working. I need urls to put in the bookmarks and links, and can't get that unless I publish. Am I correct? Yikes, that would mean paying two hosting fees until site is complete.

If this is the only way to make sure my template is working, can I use another version of my domain name that I have (custmcartoons.com), no hyphens, to build and then re-direct cust-m-cartoons.com to it when I cancel at SOI?

Yes, you could do what you just asked. I would suggest you might want to do what I did - put up a "business" website - mine is Moxie Enterprises - then use pages you never tell anyone about to play and test things in :) Some things you just need to test.

And, yes, I LOVE this software - as you know :)

And I love that we have such diversity on this forum to find answers to just about anything we might want to do with it.

I might just do that. With multiple domains and only one hosting fee, that's a great idea, Beth.

Besides, it will definitely push me to build quickly so I can get rid of the "other" $24.95/month fee!

Sheryl

thanks for the compliment, and you are very welcome.

Just as a note, the instructions I provided should pretty much be on the money. The example names I used are simply that, examples. However, the reason I chose them was to provide an easy naming convention that might make it easier to identify elements on the page...even when you aren't working on that page at all. let me show you:

you have your page,

"photos.html" - on this page, you would have a picture. to name this photo so you could know its location on your site, you could name it:
"photosPhoto1.???" - this way, by looking at the name of the photo, you would know it is the 1st photo on your "photos.html" page.

Now, the "photosPhoto1.???" needs a frame, right? Silly question, I know.

Stick an I-Frame behind it named, "photosFrame1" with the url set to the page with the colored squares and the name of your first bookmark on that page(photosFrame1Set1.html), or the name of the colored square you want to show first for that photo. ****in the dialog box where you name your I-Frame, the bottom drop-down is labeled "Bookmark" this is where you type the name of the bookmark, any bookmark from that page.

the little square below the picture that I would click to change the matte color of the picture will simply be a solid color shape, HYPERLINKED like this: http://www.lostdutchmanaz.com/photosFrame1Set1.html#green
with the "TARGET"...the drop-down....simply type in the name of the I-Frame behind that picture - "photosFrame1"


voila!! now, the reasoning behind the names I used was to allow for initial organization in the sense that you might create different "Sets" of "Frames" for each "Photo" as well as maybe a "photos2.html". Smart, at least in my opinion.

BTW, Robert - it's good to have you back posting regularly - I missed ya!

Robert:

Well, I finally created my first product page using your instructions for I-Frame. Your instructions were very easy to follow. Now my pages does exactly what I've wanted it to do for years.

There is only one little "glitch" and I have looked and looked to try and find the remedy. Perhaps a new set of more experienced eyes can spot my boo-boo.

Here is the page to view: http://www.custmcartoons.com/canoecartoon.html

All the colors square change with the exception of the navyblue one. When I click on that one, it opens up the page with my I-frame entitled mattecolors.html

Hope you, or other BV users can help me get this page in "A+" condition. I'll have many, many, many more pages just like this one, so want to make sure this template is error free.

I could be completely off base, but the first thing I noticed is that you're calling the color by the name (red, yellow, etc) instead of by their number, which is the better way to do it. There could be a conflict with the name.

I like how that looks.

When the page is done, will you be able to buy the other products from the page? I was a little confused as to why I would have to select a product, when the picture on that page is the product?

Again - that's not what this post is about, so I'm probably way off base, cuz you aren't finished :)

And Robert, or someone more knowledgeable about why that coding is doing that may say I'm off base about the coding - but I do recommend you use the numbers over the name when calling up a color.

In Robert's instructions, he suggested naming the color blocks that way (red, black, green, etc.). The only one that's not working is navyblue. At first I thought it might be because it didn't like that color name. All the other ones work. So I tried changing it to just navy. Still, it's the only square that won't work. Hopefully it won't take too long to get this straigtehened out.

I understand your confusion on ordering products, so I'll try and clarify it a little. The "Canoe Cartoon" is the design. The items in the drop-down are the products the cartoon is placed on. (keychain, magnet, mousepad, etc.) The only reason I have the color blocks change behind the image is to make it easier for customer to choose color when they select either the 8x10 Matted Print or the 8x10 Matted/Framed print size. I will have a page that shows each of my available products with descriptions and prices when site is complete.

I'm not sure why he used the name rather than the number, but I'd try using the numbers just to be sure that isn't causing any conflict. And using the numbers is actually the correct way to call up any color - meets the web standards.

I could try to change to the color names to numbers, but not sure how to find color numbers in BV. My light blue, and pink are custom colors, but the others I selected from the drop down.

When you select the colors in BV, it puts in the numbers - I was only talking about in the frame for the iframe - where you used the names - You need to use a color converter chart for finding the #'s of colors otherwise - there are several online if you need one.

hi there, sorry I haven't checked up on the thread sooner.

As to calling up the #'s for colors rather than names, I'm confused why this could be an issue.

The color "names" are used for naming the "bookmarks" that are placed over the actual "color backgrounds" on the page you use to show up within the I-Frame behind the picture. The # refference for the color shouldn't interfere with it showing up when technically you are merely calling a bookmark to show within the I-Frame via a link(the square thumbnails).

However, this brings up a very good idea... for the "alt" tags of the small blocks, when someone mouses over..etc., you could add the actual color's # refference to the name of the color... ex.:

White (#FFFFFF)
Black (#000000)

This way people would know the exact colors (most monitor aren't properly calibrated so this helps)

I did look at your page a couple days ago, and didn't see any problem with the navy blue showing up, unless I am overlooking the actual problem somehow.

Great page though! I like it very much.

Hope this cleared up any confusion.


OH, I THINK I SOLVED IT. make sure that the link you use for the "Navy Blue" ....set the "Target" to the name of the I-Frame silly.

:o)

actually, it's a tiny boo boo.

when you set the "Target" of the Navy Blue square to "mattecolors" you accidently typed a space before the name, oopsie.

should be: Target =mattecolors
you have: Target= mattecolors (notice the space before the "m")

Took me a minute to figure it out when I noticed that you had already set the target to the iframe correctly. when I compared the markup for that link to a working one, I noticed the space.

this should fix it.

Robert, just a comment about the #'s - using them means that everyone should see the same color if you are calling the colors from the internet - using the name, they may see different variations of the color.

And using the #'s in anything that will end up being code on a page is the proper way to code. Maybe, because of where you say this will be being called from, it's not important here - but it's a good habit to be in.

Absolutely Bethers. I'm glad you elaborated this in your post.
You are also correct about why I found the HEX color values to be a non-issue concerning the problem at hand...
because the colored squares are called as so:

Code:

<img src="?????.gif"> etc....

the only time these values would be necessary would be when someone chooses which color they wanted the shape to be when inside the BlueVoda application. After that, when published, it's either image metadata or converted to binary data to make up the image....can't say for sure yet, BV is a strange and powerful device...it's mystery is only exceeded by it's power. lol

Thanks for the welcome back. I missed everyone too.