How do I include pop out windows on my web page?

  • Question
  • Updated 6 years ago
  • Answered
The cricket club website I have set up has a 'Squad page' with pen pics of each of the players. I would very much like to to have an option whereby you can click on each of the pictures and a small pop out window appears with player info and data about that particular player.

Anyone know if this can be done?

Thanks

Lee

http://beehivestingers.yolasite.com/s...
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes

Posted 6 years ago

  • 1
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
not sure how I embed the code into a page Rich. That is what it is right?
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
Okay, beehivestinger, can you check the website link below and let me know if that is what you want so i can give you the code.

http://testpopup.yolasite.com/
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Right then Rich, firstly thank you for taking your time to help me out. That is VERY close to what I had in mind. I was hoping that the pop out window didn't have a url across the top and it was a fixed size. This might seem a little too much and I don't want to sound ungrateful for the efforts you have shown. Hope this helps and thnaks again for your support.
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
Ok. beehivestinger now here we go:

http://testpopup.yolasite.com/

check the 2nd image =), dont click just point your mouse
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Ah! The second image is right on! That would work well. Is this feature in the properties area on the right hand side where you'd have to write sometime in a box when you scroll over the image? Guessing here!

Thanks for the help.
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
Hi beehivestinger,

Here's the code:

<!--

<img src="http://www.google.com.ph/images?q=tbn..." TITLE="Michael Jeffrey Jordan (born February 17, 1963) is a retired American professional basketball player and active businessman">

-->

All you need to do is change the img src link and the text written on the title tag.

First you must have the img url. If you want to use the image on your yola file manager the URL should like this:

http:// testpopup.yolasite.com/resources/image.jpg
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
I don't want to sound thick but I will (lol) but where do I change the img src link? sorry!
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
Just change the image url inside the "img src" tag

example:

<!--

<img src="http://beehivestingers.yolasite.com/r...>

to

<img src="http://beehivestingers.yolasite.com/r...>

-->
Photo of smithy

smithy

  • 1222 Posts
  • 28 Likes
hay beehivestinger i know u want a pop out window but do u also want something like this??

http://popoutwindow1.yolasite.com
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Right I've been searching through the forum board and come across this:

http://www.hexham.info/swallowship

At the bottom of the page 'Duke' a Yola site user has managed to do this when you scroll over the tree. Now this is superb, and added to that a bit of information about the indivdual player would be excellent.

Rich another user also has been trying to help me with an alternative method which allows text to appear when you scroll over an image. That to is good enough for me as I can't even do that yet, let alone attempt what Duke did to his image! LOL

Rich: I know your probably fed up of me at the moment but I still can't get my head around changing the url of the image inside the 'image src' tag. Where do I access this src tag? At the moment I have my squad page open on my yola site. Am I supppose to highlight or select an image and if so where do I go from there.

I understand if you want to give up helping me as your probably hitting your head against a wall right now. So no probs if you do!

Thanks
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
What you see on the image below is an example of html code that you need to write on your page.



In HTML code, images are defined with the < img > tag.
URL is referred to as a Web address.

example of website address:
http://www.yola.com/
http://www.synthasite.com/

IMG SRC tells where to get the image or picture that should be put on the page

IMAGE URL is the web address of the image.

In order for the code to work you must write it here:
Photo of Emmy

Emmy

  • 5892 Posts
  • 298 Likes
Thanks Rich for that great support!
Photo of Rich

Rich

  • 237 Posts
  • 7 Likes
Thanks Emmy! Have a Nice Day!
Photo of MKB

MKB

  • 53 Posts
  • 0 Likes
Hi beehivestinger!

You could also try a lightbox. There are some great examples of this on Designmoo. See if you like those too...
http://www.dottony.com/30-useful-ajax...
Photo of Sanja

Sanja, Official Rep

  • 10600 Posts
  • 478 Likes
Hello beehivestinger

The image rollover that you see on the Duke's site is taken from Dynamic Drive which is called Image w/ description tooltip

Please let us know if you need any further help.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
Hi beehivestinger,

Littleus is correct (as always)... the script i use on my site is from the link she left you above.

It's actually really easy to apply... but it looks scary.

All you do is this:

1. Add the 'step 1' code to a html widget at the top of your web page.
2. Then add 'step 2' to a section of your page you want the image/tooltip to show.

(you can add html code to text widgets by clicking the little html button in the top text widget menu bar)

* If you add the small image you want users to mouse over and the larger image you want to be displayed (on mouse over) to your filemanager, then get back to us on this thread i (we) will help you get it working.

Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Lee,

I would dearly love to get the effect whereby when you roll the mouse over an image a larger one (of that image) appears.

Like you mentioned, I would be grateful if you could help me get this started.

Thanks

Lee
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
beehivestinger,

We can try...

First of all add a small image and the larger image to your filemanager (remember you can resize images with Picnik.com - i would reccomend going straight to http://picnik.com and creating a small image from the larger 1, then upload both images to the filemanager)

Let me know when youve done that and what the images are called.

Also leave your site URL.

Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Lee,

Two images (both the same one - but one bigger than the other) Both in the file manager.

Done

http://beehivestingers.yolasite.com/s...

(this is where I would like the roll over activity to be - roll over the players faces and they get bigger. I would like to put some text in the bigger picture too, facts about the player etc.. but maybe I should take things one step at a time. lol)

Thanks

Lee
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
we can add info - no problem - tell me the file names of the images (big and small)

Have you added the large images for all the players or just the first guy? (Gavin)

Either way we can start with him, get the rest done later.

I want you to understand whats happening as we go along so you can add the rest later.

Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
It's just Gavin. The small image is called 'Gavin Morgan' and the bigger image is 'Gavin Morgan 2.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
i can not get your gavin morgan 2 image to display - have you updated your site?
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Have now.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
beehivestinger - if get my last reply from email jsut ignore it.

The forum is messing with the javascript.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
email me admin@hexham.info and i will email you back the correct code.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
http://beehivestingers.yolasite.com/s...#

The second code which you just posted (is this suppose to be instead of the image - I mean I deleted the actual pen pic of Gavin and in its place I put the html icon there with the code you provided. But as you can see the image is now acting as a link but no bigger picture appears. (not yet anyway)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
did you read my most recent message? - email me, the code is getting messed up by the forum.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Email sent. Thanks
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
followed the instructions in the email, but I'm having the same problem. No large image 'pops up' when you scroll over the small on.

http://beehivestingers.yolasite.com/s...
Photo of Sanja

Sanja, Official Rep

  • 10600 Posts
  • 478 Likes
Thanks Lee for your help on this! =)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Likes
Beehivestinger,

The email didnt even work - i tested in on my site.

I'm logging out now... but we will get this working.

I'm online everyday so we will do it tomorrow - what you'll have to do is copy the code straight from dynamic drive... then i'll show you exactly how to edit it.

Sorry we could'nt get it done today - tommorrow is another day 'as they say'

Good night Lee. Lee.
Photo of beehivestinger

beehivestinger

  • 59 Posts
  • 0 Likes
Hey no problem Lee. Thanks for time anyway.
Photo of Sanja

Sanja, Official Rep

  • 10590 Posts
  • 476 Likes
Hi beehivestinger

The reason why your code is not working is because you have all these &nbsp in your code - it should not be there. Try copying the code Lee shared with you and pasting into Notepad - that should get rid of the formatting. Then, copy and paste into your site. Give that a try and see how it works out. =)