Is there a way to do this?

2 Pages
1
2
→

You cannot start a new topic
You cannot reply to this topic

Is there a way to do this?

#1 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 07 September 2009 - 07:13 AM

Hi, web design is just a hobbie for now and i would like to know if this could happen.

Note : Im using Dream Weaver

I have a rollover image and i would like it to, when the cursor is over the image instead of flipping to the other image i need it to disappear. So behind the picture there would be more than one link to click on.

Is that possible ?

If you have any other question please ask.

Thanks for reading
Regards
Delta

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 September 2009 - 08:50 AM

Yes. On mouseover, have the innterHTML content replaced with the links that you want.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 KamakaZ

Senior Member

Group: Members
Posts: 557
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 07 September 2009 - 09:12 AM

failing groovicus's idea, sounds like something flash would be suited for...

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.

#4 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 07 September 2009 - 09:37 AM

KamakaZ, on Sep 7 2009, 04:12 PM, said:

failing groovicus's idea, sounds like something flash would be suited for...

Got any idea on how to do that.

And groovicus I didnt understood what you really mean.

Thanks both for replying

#5 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 07 September 2009 - 10:46 AM

It is a single statement javascript function:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>

	 <script type="text/javascript">
			function showLinks(){ document.getElementById("myDiv").innerHTML = "<a href='http://www.groovicus.com'>www.groovicus.com</a>"; }	
	 </script>
</head>

<body>
	<div id="myDiv" onmouseover="showLinks()">
		<img src="http://www.bleepingcomputer.com/forums/uploads/av-689.jpg" />
	</div>

</body>

</html>

Can Flash do that in a single statement? I have never used Flash.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#6 KamakaZ

Senior Member

Group: Members
Posts: 557
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 07 September 2009 - 07:26 PM

No Flash would be a little nore difficult.

I'm guessing you'd probably want what groovicus has posted, maybe with a onmouseout event to change from the links back to the picture when the mouse is not on the picture.

If you need any help understanding what the code posted means, don't hesitate to ask!

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.

#7 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 08 September 2009 - 03:28 PM

KamakaZ, on Sep 8 2009, 02:26 AM, said:

Yes please, if you can tell me what the code means it would be much appreciated.

#8 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 08 September 2009 - 03:53 PM

An other idea came through my mind which I think it is easier but for some people annoying.

Take a look at my website which i uploaded on a free server for now.
My Website
When you click on a small picture/wallpaper a small window pop up so the user select a suitable resolution for his monitor.

Or ( The idea I told you before)

When you go on a small picture/wallpaper, that image disappear and "under neath it" 2 or more clickable links/text appear, example: Resolution 1024x768
resolution 800x600
(Note: Each link would re direct the user to a unique page)

I think the second option is more difficult but more user friendly.

Please, tell me exactly where i should put the coding in my page.

Thanks a lot and sorry for double posting, I should have pressed the Edit option.;)
Delta

This post has been edited by Delta16: 08 September 2009 - 03:56 PM

#9 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 08 September 2009 - 04:45 PM

Quote

Please, tell me exactly where i should put the coding in my page.

Put what coding? Did you look at the example I gave you?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#10 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 09 September 2009 - 01:20 PM

OK, yes i looked at your example and messed a little around it and got it working, thanks to you :thumbsup:

Now there is 2 problems, One is, that when i move the mouse over the image its start flashing and the other is when i move the mouse over the image and then remove the cursor without clicking the image wont appear again, like KamakaZ said

Thanks a lot for helping me

This post has been edited by Delta16: 09 September 2009 - 01:34 PM

#11 KamakaZ

Senior Member

Group: Members
Posts: 557
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 09 September 2009 - 06:20 PM

Not sure about the flicking, but for the image to change back, have a look at the "onmouseout" statement.

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.

#12 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 10 September 2009 - 01:20 AM

I think ill use the other idea, cause its not working well. When you move the mouse over the image, it disappears, thats good, but when you move the cursor on the image area, the link starts flashing.

Can I fix that?

Thanks

This post has been edited by Delta16: 10 September 2009 - 02:55 AM

#13 KamakaZ

Senior Member

Group: Members
Posts: 557
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 10 September 2009 - 05:31 AM

Do you have a link to what your desribing? and also what browser are you using?

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.

#14 Delta16

Senior Member

Group: Members
Posts: 389
Joined: 18-August 08
Gender:Male
Location:Malta

Posted 10 September 2009 - 08:44 AM

OK, found the problem, the opening <div > tag was not in the right place, any way , its fixed. Thanks for taking interest.

What can i add in this statement to restore the image when the mouse is not over.

onmouseout="()"

Or if it is the wrong statement tell me the right one. :thumbsup:

Thanks

EDIT : Uploaded the files so you can see whats happening.

My Website

Move the mouse over the digital art picture and click it. Another problem is that it wont re direct.

This post has been edited by Delta16: 10 September 2009 - 09:04 AM

#15 KamakaZ

Senior Member

Group: Members
Posts: 557
Joined: 26-August 08
Gender:Male
Location:Victoria

Posted 10 September 2009 - 05:51 PM

Give this a go

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>

	 <script type="text/javascript">
			function showLinks(){ document.getElementById("myDiv").innerHTML = "<a href='http://www.groovicus.com'>www.groovicus.com</a>"; }	
</script>
	 <script type="text/javascript">
			function
 hideLinks(){ document.getElementById("myDiv").innerHTML = "<img src='http://www.bleepingcomputer.com/forums/uploads/av-689.jpg' />"; }	 
</script>
</head>

<body>
	<div id="myDiv" onmouseover="showLinks()" onmouseout="hideLinks()">
		<img src="http://www.bleepingcomputer.com/forums/uploads/av-689.jpg" />
	</div>

</body>

</html>

If I am helping you and don't reply in 24 hours please send me a PM

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.