Help - Search - Members - Calendar
Full Version: Image swap with span / div
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
ot4ku
hi,
i want to swap a image everytime someone goes witht he mouse over a word, for example ther eis a list of animals, and if you go over a word the IMAGE on the right side of the webseite changes to that of the animal (always on same position)
ON html i could do it, but i have no idea how to do this with this DIV and SPAN things...
The website im using dosent allow CSS or normal html image swaps :/

For example, mouseover works like this: (and only like this)

<ul class="multi_select"><li class="selector">
<a rel="nofollow" href="#" target="_blank">
<span class="ms-int" style="width:186px;height:276px;background-image:url(pic01a.gif);border:0;margin:0;padding:0;">

<span class="button" style="width:186px;height:276px;background-image:url(pic01b.gif);border:0;margin:0;padding:0;"></span>
</span>
</a></li></ul>


And i have NO idea why this is working like above... its just on the website it says use "this" for Mouseover Images.

Any idea how i can use the same style for swaping a image on a position on the site like i wrote above?
Like changing a pic to "pic01c.gif" "pic01d.gif" "pic01d.gif" etc. by mousover some text?

I know its not good explaind, maybe someone has a idea? thanks
pandy
You can only to this with CSS and/or JavaScript. With only HTML you can't do things like this. It's just markup.

You must have misunderstood how the example works. It does use CSS (in the style attributes) but not enough to make something happen. There must be more, either embedded in head or in an external style sheet.
ot4ku
QUOTE(pandy @ Jun 2 2012, 04:27 AM) *

You can only to this with CSS and/or JavaScript. With only HTML you can't do things like this. It's just markup.

You must have misunderstood how the example works. It does use CSS (in the style attributes) but not enough to make something happen. There must be more, either embedded in head or in an external style sheet.


Is there a way to realise it with just <span & <div somehow? Direclty in the file with no external css file?
pandy
With en embedded style sheet in HEAD but not with style attributes only. Because you need to use :hover and that isn't possible in a style attribute.

You can inline JavaScript though. Do I understand it right that you can use CSS and JS if you can write it in HTML attributes?
ot4ku
QUOTE(pandy @ Jun 2 2012, 06:45 AM) *

With en embedded style sheet in HEAD but not with style attributes only. Because you need to use :hover and that isn't possible in a style attribute.

You can inline JavaScript though. Do I understand it right that you can use CSS and JS if you can write it in HTML attributes?



I think so, im nor sure, i can test it if you can give me an example, its for "justin.tv" they are so complicated in editing the channel...

It should look like these: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm Its just those </script> things wont work :/
pandy
You can use any JavaScript snip to test that, but here goes.

HTML
<img src="http://htmlhelp.com/icon/wdglogo.gif" onmouseover="this.src='http://forums.htmlhelp.com/uploads/av-6.gif'" onmouseout="this.src='http://htmlhelp.com/icon/wdglogo.gif'">
ot4ku
Ok it dosent support the normal mouseover like you posted above, just testet it :/

so it need something with div & span or something...

It only works like this:

<ul class="multi_select">
<li class="selector">
<a href="URL">
<span class="ms-int" style="width:WIDTHpx;height:HEIGHTpx;background-image:url(base_img);border:0;margin:0;padding:0;">
<span class="button" style="width:WIDTHpx;height:HEIGHTpx;background-image:url(highlight_img);border:0;margin:0;padding:0;"></span>
</span>
</a>
</li>
</ul>

So i need the same kind of code for the image swap like here: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm
pandy
Again, the markup you posted does nothing on its own...
ot4ku
QUOTE(pandy @ Jun 2 2012, 06:12 PM) *

Again, the markup you posted does nothing on its own...


what do you mean? i use these code to make my mouseovers, or what do you mean?
ot4ku
well it dosent work if i make a HTML and look at it, but for some reason it works on justin.tv.
They use the most complicated way i ever saw... i dont think its possible there to use it :/ thanks anyway
pandy
So they have a style sheet that makes it work...
Frederiek
QUOTE
So i need the same kind of code for the image swap like here: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm

They use javascript, using this HTML and function calls:
CODE
<a href="java script:void(0)" onmouseover="Zeigen('bild4')" onmouseout="Verstecken()"><img class="Mini" src="symb-75-004.gif" width="75" height="75" border="0" alt=""></a>

View the page source for the script. You'll find it near the top of the page.
If that doesn't work for you, you might take a look at http://meyerweb.com/eric/css/edge/popups/demo2.html .
pandy
He can't use that, he just wants it to look like that.
Christian J
QUOTE(ot4ku @ Jun 2 2012, 07:17 AM) *

i want to swap a image everytime someone goes witht he mouse over a word, for example ther eis a list of animals, and if you go over a word the IMAGE on the right side of the webseite changes to that of the animal (always on same position)

You need to post the HTML for that IMG element as well.

QUOTE

For example, mouseover works like this: (and only like this)

<ul class="multi_select"><li class="selector">
<a rel="nofollow" href="#" target="_blank">
<span class="ms-int" style="width:186px;height:276px;background-image:url(pic01a.gif);border:0;margin:0;padding:0;">

<span class="button" style="width:186px;height:276px;background-image:url(pic01b.gif);border:0;margin:0;padding:0;"></span>
</span>
</a></li></ul>

The above only contains a single list item. If you want different animal images to show with every list item, you also need a way to indicate this in each list item's HTML. Also, where does the mouseover take place --on the LI, link or on one of the SPAN elements?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.