|
|
Post by PeteB on Jul 31, 2015 20:43:32 GMT
|
|
|
|
Post by tangomike on Jul 31, 2015 21:50:57 GMT
Yes, Pete, I did. Here's what's happening: 1. I create a PSD image of the circle diagram with each of the circles and associated text (the name of the program area) on layers and save it as a JPEG. 2. Using the slice tool, on this JPEG image I create six slices, one around each of the texts blocks on the circles and add the URL for each page corresponding to the text on the circles. 3. To get the URL for each page, I have a test page with the title of each page listed on it, and I insert the links to each page in the text, then select text and copy the URL. They look like this: <a href="http://02a99e5.netsolhost.com/wordpress1/diversify/">DIVERSIFY!</a>. 4. The links work as the should when I view that test page and click on the link by taking me to each of the six pages. 5. But when comparing the dialog when I save this image for the web, the only choice I get is saving the images only. 6. In one of the videos suggested for reference, this save for web dialog has fields labeled File Name, Format (html and images), Settings (default), and Slices (all slices). 7. I'm not being presented with those choices, so the image that is inserted into the that page on the site is nothing more than an image without the URL info needed to link to other pages on the site. That confuses me just writing it, so it may not be sufficiently clear enough to help me discover what I'm doing wrong, but any suggestions would be appreciated. Thanks, Tosh |
|
|
|
Post by tangomike on Aug 1, 2015 2:43:11 GMT
As a follow-up to my last reply, I've looked at about five different tutorials on using the slice tool and everyone of them shows a "Saved Optimized As" dialog with four choices, and every time I've done this, I get only one: Format: Images Only.
At this point I have no idea why.
Tosh
|
|
|
|
Post by Tpgettys on Aug 1, 2015 2:54:16 GMT
Hi Tosh, I don't know if you have seen it yet, but I sent you a PM with the developers email address. He said he would be glad to work with you using his software.
|
|
rammi
New Forum Member
Posts: 21 
|
Post by rammi on Aug 1, 2015 3:46:40 GMT
Hi tangomike. I'm a long time lurker, first time poster but I think I might be able to help you here. My understanding is that you have an image on a web page and you want various parts of it clickable on a web page with each clickable part going to a new web page. If that is correct, I think there is a much easier way than slicing up your image. There are 2 other much simpler imo ways I can suggest. 1. Use a HTML Image Map (click for more info and tute.) You create your image in pse or ps and then save it for the web as a jpeg file. Use an online mapping tool or download some free image mapping software to get the coordinates of the various clickable areas on your image. Add the image to your web page using the html <img> tag and then add the clickable areas using the html <map> tag as described in the HTML Image Map link above. 2. Create a separate image in pse or ps for each clickable and non-clickable part of the overall image. Then add each image to your web page using a html <img> tag and use CSS (Cascading Style Sheet) to position each image. Basically you can use css positioning and the z-index css style to create layers in html, similar to layers in pse or ps. Finally wrap each clickable image with a html anchor <a> tag and link each <a> to the correct web page using a href attribute. For me, I usually use option 2 but I use option 1 sometimes as well depending on the complexity of the image. Hope this helps and good luck  |
|
|
|
Post by tangomike on Aug 1, 2015 13:10:46 GMT
Thank you Tom and rammi for your assistance,
At this point, the most confusing part is that each of the tutorials has different levels of detail and the workflow descriptions vary just enough to make me doubt that I'm doing each step correctly.
With that in mind, before using rammi's alternative to Elements+ and the slice tool, I've contacted the developer with the problem to see if he can identify what I'm doing wrong.
More to follow, and hopefully it will include the word "success . . ."
Tosh
|
|
|
|
Post by tangomike on Aug 1, 2015 13:14:25 GMT
And I just got another Mail Delivery Failure message when using the email address you provided, Tom. If the developer won't adjust his settings to allow me to contact him, it's going to be another long day of unsatisfactory results.
Tosh
|
|
rammi
New Forum Member
Posts: 21
|
Post by rammi on Aug 1, 2015 14:11:28 GMT
Thank you Tom and rammi for your assistance, At this point, the most confusing part is that each of the tutorials has different levels of detail and the workflow descriptions vary just enough to make me doubt that I'm doing each step correctly. With that in mind, before using rammi's alternative to Elements+ and the slice tool, I've contacted the developer with the problem to see if he can identify what I'm doing wrong. More to follow, and hopefully it will include the word "success . . ." Tosh This demo might help you if you decide to go down the Image Map route.  The two circles are hotspots (clickable areas) on the image. Obviously you will need to download the image and html code first (see instructions below). Clicking Circle 1 will take you to the web page circle1.htm and clocking Circle2 will take you to circle2.htm. Both circles have a radius of 100px for demo purposes. Of course, when you click on each circle your browser will tell you it cannot find the respective html page. But if you create a demo circle1.htm and circle2htm pages your browser will open them when a circle is clicked. The html page to display the image is below. <!DOCTYPE html> <html> <head> <title>Image Map Demo</title> </head> <body> <div><img src="imageMap.jpg" usemap="#myMap" alt="" /></div> <map name="myMap"> <area shape="circle" coords="170,176,90" href="circle1.htm"> <area shape="circle" coords="405,415,90" href="circle2.htm"> </map> </body> </html> To play with this demo, download the image (600 x 600 pixels) into a folder on your pc. Then copy and paste the html code into a blank text file on your pc. Save the text file into the same folder as the image and name it anyThingYouLike.htm Set the value of the src attribute in the <img> tag to whatever you called the the image file when you download it. In your browser select File->Open and then navigate to the folder containing the image and .htm file and select the .htm file. The image should then open up in your browser and when you click each circle your browser will go to the circle's respective web page. |
|
|
|
Post by Sepiana on Aug 1, 2015 15:01:55 GMT
And I just got another Mail Delivery Failure message when using the email address you provided, Tom. If the developer won't adjust his settings to allow me to contact him, it's going to be another long day of unsatisfactory results. Tosh Tosh,
How are you trying to contact him? Have you tried going via this page, the "contact the author" link at the bottom of the page?
simplephotoshop.com/buy_elements+.htm
Don't give up on Elements+. I believe its Slice tool will do the job you want (and the price is right). Elements+ is an "established" add-on going back to Elements 1. I also know that the author will go out of his way to help.
As a side note, Elements+ comes with a lot of credentials -- highly recommended in the now closed EV forum; listed in Barbara Brundage's The Missing Manual; and quite often recommended in the Adobe forums.
|
|
|
|
Post by tangomike on Aug 2, 2015 11:31:52 GMT
Thanks for the expanded explanation, rammi. I'm not quite ready to abandon the Elements+ option quite yet, but we'll see how this plays out. Sepiana, the problem contacting the developer was a typo in the address Tom provided. I sent an email yesterday and he replied with this explanation as a possible fix: "My guess is that the tutorials you refer were composed for full Photoshop. In PSE, you can't change "images only" option. That's why you should save the created slices with E+ "Export Slices" script as explained here: elementsplus.net/help/en/export-slices.htm"Please, note that you may need to choose the same target folder twice: 1. In "Save Optimized As" dialog (only the target folder matters here; don't bother about other options) 2. In "Choose a Folder" dialog, that opens immediately after the "Save Optimized As". (On a Mac, the same folder must be selected by default, so, you just click "OK" one more time.)" I had studied the tutorial he mentions more than once and found that the specific workflow mentioned there doesn't present me with exactly the same dialogs as indicated. But this time I did end up with a single folder that included a folder labeled "images" and for the first time it also had an html file. What I don't have is a single jpg image that I can add to the media on the website and insert into a page. The source jpg from which I ran the Export slices script is still an unlinked image, and the images folder and the html file are the only results of Save Optimized As workflow. As a side note, the Mac doesn't give me an "OK" to click at the end of the Save Optimized As process. It's an "Open", which is the action that puts the html file in the same parent folder as the images folder, but that's not solving the basic problem. I've sent screenshots to the developer in reply to his suggestion. |
|
rammi
New Forum Member
Posts: 21
|
Post by rammi on Aug 2, 2015 12:00:50 GMT
Thanks for the expanded explanation, rammi. I'm not quite ready to abandon the Elements+ option quite yet, but we'll see how this plays out. That's ok tangomike . The demo I posted took only about 15 minutes to put together, including creating the demo image. If you're familiar with HTML code, setting up a html image map making the text in your circles clickable should take only about 10-15 minutes maximum after you export a jpeg of your image - especially since the clickable areas will be rectangles. But if you're not familiar with html code then using a "slice and dice" tool that hopefully creates the html code for you is probably your best option although it's very messy as you are experiencing. Hopefully you'll be able to get what you need with Elements+. |
|
|
|
Post by tangomike on Aug 2, 2015 22:43:31 GMT
rammi, I'm not familiar with HTML and that's really the point from this chair. I taught myself how to create ebooks and print-on-demand paperback interiors and covers and build four Wordpress websites without stopping to learn how to write code. I realize this is akin to blasphemy to anyone who thinks code is poetry, but I don't have enough heartbeats left to join those ranks. The website i"m helping with now is coming along fine, and the only stumbling block has been trying to create this linked image. The developer of Elements+ has risen above and beyond the call of duty trying to help, and after a few email exchanges he identified two problems that were affecting the results: the naming conventions I was using, and the Save Optimized As actions that were required to put the HTML file and the images file in the same folder. Once I got that right, the HTML file opens a stand-alone web page with the linked image, and each of the six circles leads directly to the corresponding pages on the target website. So far so good, but from that point I never was able to create a page on the website with the linked image that links to the other pages. What I tried to do was create a new page and add the HTML file and the images to it, but that doesn't work. What's missing is knowing how to get the images and the HTML file to "work together" as a page on the website. The developer mentioned that "To use the generated code on your page, copy the table (i.e., everything from <table to </table> ) and paste it in your page code." I've tried to do that but I'm doing something wrong. It feels like a case of being so close and yet being so far . . . Tosh |
|
rammi
New Forum Member
Posts: 21
|
Post by rammi on Aug 3, 2015 0:09:02 GMT
Hi tangomike. I don't want to spend time debugging other software's generated code, but if you are happy to post your actual image with the circles and text I can create the html image map code for you. It should take me no more than 10-15 minutes. I can then post the code for you with instructions on how to insert it into your web page. It would also help, but is not essential, if you could post the html code of the web page where the clickable image will be.
If you post any code please make sure you wrap it in the quote tags located in the post editor's toolbar.
|
|
|
|
Post by Sepiana on Aug 3, 2015 0:20:48 GMT
The developer of Elements+ has risen above and beyond the call of duty trying to help, and after a few email exchanges he identified two problems that were affecting the results: the naming conventions I was using, and the Save Optimized As actions that were required to put the HTML file and the images file in the same folder. Once I got that right, the HTML file opens a stand-alone web page with the linked image, and each of the six circles leads directly to the corresponding pages on the target website.
Tosh,
That's why Elements+ gets all the accolades. Its author will stand behind his software. He will stick with you until the problem is solved. Just keep e-mailing him.
I strongly recommend you keep in touch with him. He will guide you through this. After all, you paid for Elements+ and consequently for the five-star support that comes with it. |
|
|
|
Post by tangomike on Aug 3, 2015 2:13:51 GMT
rammi:
Thanks for the offer, but I'm not comfortable imposing on your time, even if it's a quick job for you. If I'm going to do this for my friend, I need to be able to do it again on my own if we want to change something, and the HTML-heavy solution makes my eyes cross.
Sepiana:
I appreciate your point, but although I said "a few" email exchanges, at last count there had been eight, and his last reply gave me the impression that the effort was becoming a bit tiresome. He's helped me determine what I was doing wrong to build a linked image that works, and that's really all his tutorial is designed to do. The task of getting it into a page on the site seems more like my task than his, and I'm probably going to investigate that rather than keep pestering him.
|
|
