Display an image from co-ordinates of another

[dopy]

Hi there
I'm new to this but I need to display an image when the user clicks on a particular area of the displayed picture. I have already done this using co-ordinates and a new page for each image but this is getting messy. Ideally I want to click on part on the image, display the new image (which would be smaller that the original) part of the original picture would still be visable, have a close button on the small image leaving the original picture behind.
Many thanks in anticipation

[r035198x]

Hi there
I... I have already done this using co-ordinates and a new page for each image but this is getting messy. ....

page eh? Are you using Java or Javascript?

[dopy]

page eh? Are you using Java or Javascript?

I was hoping to use javascript within html

[r035198x]

I was hoping to use javascript within html

You posted in the wrong forum then.
You see Java != Javascript.

I'll now move this to the Javascript forum

[gits]

hi ...

please post some code you've already have. i assume you made an image-map? please explain in more detail what you want to do ... i think you want to click on the imagemap and want to show a detailed view for the clicked part of the image? probably within a small popup-window?

kind regards

[dopy]

hi ...

please post some code you've already have. i assume you made an image-map? please explain in more detail what you want to do ... i think you want to click on the imagemap and want to show a detailed view for the clicked part of the image? probably within a small popup-window?

kind regards

As yet I have no code but you are exactly correct in what I want to do. I have already done a similar task with images into frames but that was simple html, don't know where to start with images without the frames. Sorry for being a nuisance

[gits]

hi ...

no problem ... we are here to help you ... ;)

first let me give you an idea on how to achieve your goal: create a div at your page and give it an id so you may simply refer to it. make it hidden with the style property 'display: none;' and visible with 'display: block;' when you click your image-map / click a close-button that should be contained by the div. have a look at the example:

// state should be boolean (true or false)
function toggle_container(state) {
    var img_container = document.getElementById('your_div_id');
 
    img_container.style.display = state ? 'block' : 'none'; 
}
 

call that onclick of the image-map-parts with true and onclick of your button with false.

now the next part: your div should contain an img-tag with an id and empty src-attrib. now we must have a list that matches your image-map-parts with a corresponding image ... may be an id and an img-src:

var img_list = {
    'part1': 'img_src1.jpg',
    'part2': 'img_src2.jpg'
    // and so on ...
};
 
// id is your image-map-part-id ;)
function set_img_src(id) {
    var img = document.getElementById('your_img_tags_id');
 
    img.src = img_list[id];
}
 

try something like that ... it should work. you may retrieve the mouse-coords in case you need that and set more style-properties of our container ... but first try to display the div the way i showed you :)

kind regards

[dopy]

hi ...

no problem ... we are here to help you ... ;)

first let me give you an idea on how to achieve your goal: create a div at your page and give it an id so you may simply refer to it. make it hidden with the style property 'display: none;' and visible with 'display: block;' when you click your image-map / click a close-button that should be contained by the div. have a look at the example:

// state should be boolean (true or false)
function toggle_container(state) {
    var img_container = document.getElementById('your_div_id');
 
    img_container.style.display = state ? 'block' : 'none'; 
}
 

call that onclick of the image-map-parts with true and onclick of your button with false.

now the next part: your div should contain an img-tag with an id and empty src-attrib. now we must have a list that matches your image-map-parts with a corresponding image ... may be an id and an img-src:

var img_list = {
    'part1': 'img_src1.jpg',
    'part2': 'img_src2.jpg'
    // and so on ...
};
 
// id is your image-map-part-id ;)
function set_img_src(id) {
    var img = document.getElementById('your_img_tags_id');
 
    img.src = img_list[id];
}
 

try something like that ... it should work. you may retrieve the mouse-coords in case you need that and set more style-properties of our container ... but first try to display the div the way i showed you :)

kind regards

Hi
Many thanks for the time you have taken, but unfortunately I am no further on. Although I have used javascripts before I have no knowledge of javascript. I need the complete script with reference as to whether it should be in the header or body of the html document. I am a retired COBOL programmer, this new stuff is a bit different. If the code wasn't for our local free newspaper(http://www.alythvoice.co.uk/) I wouldn't be bothering you. If you could find the time to post the complete script I would very much appreciate it.
Many thanks dopy.

Ps My logon name says it all.

[gits]

hmmmm ... we are not supposed to post complete solutions here ... in case you are willing to solve the problem let us work together on it ... first ... post some html code that we may use as the base for our work from now on ... ok?

kind regards