Text an Image in one Hotspot?

Q&A about the latest versions
Hakon
Posts: 24
Joined: Tue Aug 07, 2012 11:10 pm

Text an Image in one Hotspot?

Post by Hakon » Thu Sep 21, 2017 2:52 pm

Is it possible to integrate both text and pictures in a hotspot? You could create an "article" using eg MS-Word, convert the Word-File to an Image and then link it to an image hotspot, but if you want to change something, it takes a lot of work....

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Fri Sep 22, 2017 4:15 am

Hakon wrote:
Thu Sep 21, 2017 2:52 pm
Is it possible to integrate both text and pictures in a hotspot?
Hi Hakon,

The simple answer is yes! The longer answer, and the way I do it, is to create an HTML page using CSS that incorporates the image/s, text, links, fonts etc. and then add it to the hotspot text box using iFrame code. Then if you want to change anything you just have to modify the HTML page.

text-image-hotspot.jpg
text-image-hotspot.jpg (532.36 KiB) Viewed 3727 times

Working panorama: http://panos.expedition.photography/PON ... rown-Bluff

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Hakon
Posts: 24
Joined: Tue Aug 07, 2012 11:10 pm

Re: Text an Image in one Hotspot?

Post by Hakon » Fri Sep 22, 2017 8:07 am

Hi Tony,

thank you for your suggestion. Looks like I have to get into HTML programming.

User avatar
panox
Posts: 221
Joined: Mon Mar 12, 2007 11:03 pm
Contact:

Re: Text an Image in one Hotspot?

Post by panox » Fri Sep 22, 2017 9:27 am

Can you show some of this code? The link is misleading.
snap3872.jpg
snap3872.jpg (89.04 KiB) Viewed 3722 times

Hakon
Posts: 24
Joined: Tue Aug 07, 2012 11:10 pm

Re: Text an Image in one Hotspot?

Post by Hakon » Fri Sep 22, 2017 12:43 pm

Is there
Video tutorials on how to do something like this?

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Fri Sep 22, 2017 3:57 pm

Hakon wrote:
Fri Sep 22, 2017 8:07 am
thank you for your suggestion. Looks like I have to get into HTML programming.
Yes, that's what I had to do too. Actually it's more CSS than HTML, the HTML bit is easy.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Fri Sep 22, 2017 4:01 pm

panox wrote:
Fri Sep 22, 2017 9:27 am
Can you show some of this code? The link is misleading.
Sorry about that I had the wrong link attached to the button, it should be pointing to Brown Bluff on Wikipedia now.

https://en.wikipedia.org/wiki/Brown_Bluff

The HTML page looks like this...

Code: Select all

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>EN Location Information</title>
	<style type="text/css" media="screen, print, projection">
	
	body {
		background:white;
	}	
/*
* Sets the crop offset and image size
*/	
	img.locsize {
    	position: relative;
    	top: -80px;
    	left: 0px;
    	width: 587px;
    	height: 587px;
		}
/*
* Sets the spacing between lines of text
*/	
	p.lineh { 
		line-height: 110%;
		}
	</style>
	<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="vertwrap">
	<div class="verttitle" style="color:rgba(53,79,112,1.00)"><p>Brown Bluff - Antarctic Peninsula</p></div>
	<div class="vertimage"><img class="locsize" src="../photos/cnews.JPG"></div>
	<div class="vertcopyright" ><p style="padding-right: 100px">Photo: The rust-colored cliff of Brown Bluff - ©2017 Tony Redhead</p></div>
	<div class="buttoncenter"><a href="https://en.wikipedia.org/wiki/Brown_Bluff" class="embpopupbutton" target="_blank" style="font-family: Futura-Bold; color:rgba(190,190,193,1.00);">Discover Brown Bluff</a></div>
	<div class="vertcontwrap">
		<div class="vertcontent">
			<div class="verttext">
				<p class="lineh">Human activity within the Antarctic Sound region has largely bypassed Brown Bluff, as you make your way up the cobble and ash beach toward the Bluff you really experience it's remoteness. The beach, approximately 3 kilometers long, rises to a steep scree slope, which in turn rises to meet the towering rust-colored cliff of volcanic rock that dominates the landscape.</p>
				<p class="lineh">All around you are tens of thousands of Adélie penguins and several hundred Gentoo who also inhabit this region.On the beach under the cliff are large Volcanic tephra that provide nesting homes for the birds.</p>
			</div>	
		</div>
	</div>
</div>
</body>
</html>
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Fri Sep 22, 2017 4:03 pm

Hakon wrote:
Fri Sep 22, 2017 12:43 pm
Is there Video tutorials on how to do something like this?
If I get some time I will post a tutorial on my website on how to create this popup.

http://tonyredhead.com/#tipsandtutorials-section

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

User avatar
Hopki
Gnome
Posts: 9371
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Text an Image in one Hotspot?

Post by Hopki » Fri Sep 22, 2017 10:23 pm

Just an FYI: viewtopic.php?f=22&t=12123
Regards,
Hopki

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Sat Sep 23, 2017 12:32 pm

Thanks Hopki, I always learn so much from your posts and sample files.

In this case the reason I went with the HTML/CSS option was that I have over 80 panoramas that need to be displayed in a format such as the one shown earlier at http://panos.expedition.photography/PON ... rown-Bluff with the multi-language option and the 4 hotspots.

For example here is a shot from the walls of Dubrovnik http://panos.expedition.photography/PON ... vnik-Walls. You can see that the same layouts are used. Rather than change content within the skin I've elected to change it in the includes.

I have a base project that I use and simply change placeholder images, text and video. http://panos.expedition.photography/PON ... -Template/

Once again I'm not sure that this is the optimum way to implement such a project and I'd be interested to hear any alternatives.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Hakon
Posts: 24
Joined: Tue Aug 07, 2012 11:10 pm

Re: Text an Image in one Hotspot?

Post by Hakon » Wed Sep 27, 2017 8:33 am

Tony wrote:
Fri Sep 22, 2017 4:03 pm

If I get some time I will post a tutorial on my website on how to create this popup.

http://tonyredhead.com/#tipsandtutorials-section

Tony

That would be very fine. I like the design of your popups.

User avatar
Hopki
Gnome
Posts: 9371
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Text an Image in one Hotspot?

Post by Hopki » Wed Sep 27, 2017 2:22 pm

Hi Tony,
Looks good to me 8)
More than one way to skin a cat and if not said before, great work.
Regards,
Hopki

User avatar
360Texas
Moderator
Posts: 3335
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Re: Text an Image in one Hotspot?

Post by 360Texas » Wed Sep 27, 2017 5:05 pm

Great clean, sharp and well lighted imaging.
Really like the tool bar and icon button suite.

Thanks for the show and tell.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com

User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Text an Image in one Hotspot?

Post by Tony » Thu Sep 28, 2017 9:40 am

Hi Hopki, Dave,

Thanks for the feedback, much appreciated.

It was quite tricky to get everything working on the different devices. I tend to work on a 1,000 x 900 skin grid so I set up a number of layouts, in Indesign, that reflected the grid in relationship to the device. Then I could move and resize objects on the layout and then use the changes to update the skin for the device. Here are a couple of screengrabs.

iPhone Port - Just grid
ponant-G+68.jpg
Plain grid
ponant-G+68.jpg (217.07 KiB) Viewed 3637 times
iPhone Port - with elements
ponant-G+69.jpg
ponant-G+69.jpg (231.69 KiB) Viewed 3637 times
cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Hakon
Posts: 24
Joined: Tue Aug 07, 2012 11:10 pm

Re: Text an Image in one Hotspot?

Post by Hakon » Fri Sep 29, 2017 2:56 pm

I have managed (with help) to create an HTML page with the desired content. The HTML page I have in the text field of an information hotspot via the code "<iframe src =" taktilerGebaeudeplan.html "width =" 800 "height =" 1400 ">".

How do I get the popup window now that it automatically scales to the right size?

Post Reply

Who is online

Users browsing this forum: No registered users and 9 guests